Welcome to Brothers IT Hub. Today our topic is 'how to create tables in blogger post using HTML codes'. Dear friends as we know, basically, there is no option in blogger to add a table in post but we can create a table in the post using different techniques and one of the best technique is to add a table using HTML code because adding HTML table in blog post is very easy and simple. Blogger allow us to design our pages and posts according to our desires with HTML editor option. We can give any design to our post or page and we can add or create anything in our page or post in HTML formats according to our wish.
What is Table?
A table is an arrangement of data into rows and columns or possibly in more complex structures. Tables are widely used in communications, research and data analysis. Tables can have one or more then one rows and columns. Every column and row in a table has unique type of data.
Screenshot of a Table When we need to add a table in a post?
If we want to tell something to our visitors that is divided in different categories or has different benefits or information that is related to groups type data then it is necessary to add a table in post to sort the data in its best form. Data in tables becomes more accurate to read and understand. We can add any type of data in tables regarding students exam results, Jobs Information, Salary, Profits, employs information's, ages or information about a single person or multiple persons, contacts etc. Look at the table of Ufone daily internet packages given below as a example.
| Package | Price | Details | Validity | Activation Code |
|---|
| Daily Light | Rs. 12 | 40 MB + 500 MB Social | 1 Day | *2256# |
| Daily Heavy | Rs.18 | 75 MB + 500 MB Social | 1 Day | *2258# |
| Special Daily | Rs.6 | 50 MB + 500 MB Social | 1 Day (1am to 9pm) | *3461# |
| Mega Internet Bucket | Rs.15 | 2048 MB | 1 Day (1am to 8am) | *550# |
After observing above table, you can understand why we need to add a table in our post or how much it make easier to read and understand. In above table there are 5 columns and 5 rows including thread row. The first row of the above table is thread.
What are Advantages / Benefits of adding a Table in the Post?
There are many benefits of adding a table in the post but we will discuss a few benefits to decrease the length of our post. Some best benefits of adding a table in post are:
- Tables reduce the complexity of information or data.
- Tables help to compare information of different subjects easily.
- Tables help to represent the visual information in more easy format.
- In Tables we can add the information in specific way rather than in paragraphs.
- Tables makes the data more understandable and efficient.
- Improve readers experience.
- Helps to make our post more attractive.
And it has many other best advantages that can make your post more valuable.
How to create a table using HTML?
Creating a table using HTML is very simple and easy. HTML stand for
Hyper Text Markup Language. It is clear from its name that it is text based language and there is no difficult coding or scripting. We can create web pages, buttons, themes and much more related to web with HTML language. Creating a table in HTML is very easy. A table is start with
<table> tag and end with closing
</table>tag. And between these two tags we add table body i.e, styles of table, columns and rows. Look at the code of the table given below and observe carefully to understand the concept of HTML table clearly. (Copy this code and past it into your post to add table in your post.
<table style="border: 3px solid #ccc; height: 450px; text-align: center; width: 100%;">
<thead style="background: green; color: white;">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody style="background: #f7f6f4; text-align: center;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table> |
- You can see it is very simple and easy HTML code. In this code, Table is starting with <table> tag. In <table> tag we can set table styles i.e, colors, height, width, borders, text-align etc.
- After <table> tag header of table starts with <thread> tag. In <thread> tag we can set header styles i.e, background color of header and text color.
- Bellow <thread> tag we are starting the <tr> tag. The <tr> tag is used to create a row and <th> tag is used to create a header cell in this row. We can create many header cells in a row according to our need. Every header cell starts with <th> and end with </th>. After adding header cells we close row with </tr> tag.
- Now, after this table body starts with <tbody> tag. In this tag, we are creating rows and columns. Every row is starting with <tr> tag and ending with </tr> tag.
- In every row, we have to add columns. Every column starts with <td> tag and end with </td> tag. We can create multiple rows with columns. The number of columns of table body should be equal to header cells.
- After adding rows and columns we close table body with </tbody> tag and then we close our Table with </table> tag. Now our Table is ready according to our well.
This was a basic table but if you want to create an advance table i.e, a table with row spans, column spans and caption then follow the methods described below.
How to add a cell that spans rows in a table?
If you want to add a cell that spans the rows in a table then add
rowspan="No. of spans" in
<td> tag of that cell. Consider we are adding two spans for the desired cell then
<td> tag will look like this
<td rowspan="2">cell name or value here</td>Below is the code of a table which has a cell that span two rows. Observe this code carefully to understand clear concept of row span.
<table style="border: 3px solid #ccc; height: 150px; text-align: center; width: 100%;">
<thead style="background: green; color: white;">
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
</thead>
<tbody style="background: #f7f6f4; text-align: center;">
<tr>
<td rowspan="2">Mr Bro</td>
<td>575 77 857</td>
</tr>
<tr>
<td>575 77 857</td></tr>
</tbody>
</table> |
When you will test above code then you will get a table like the table given below. This table has a cell "Mr Bro" that span two rows.
| Name | Telephone |
|---|
| Mr Bro | 575 77 857 |
| 575 77 857 |
The above table has two row spans but you can add many spans for a cell according to your need. To do so just change the number of spans in
<td> tag.
How to add a cell that span columns in a table?
If you want to add a cell that span many columns of a table then add
colspan="No. of spans" into
<th> tag. If you are using
<td> tag instead of
<th> tag then add colspan="No. of spans" into <td> tag. Let we are adding two spans for a cell then the
<th> tag will look like this
<th colspan="2">Name or value of cell here</th> and this will span two columns in a table. Below is the code of a table which has a cell that span two columns. Observe this code carefully to understand the concept of columns span clearly.
<table style="border: 3px solid #ccc; height: 150px; text-align: center; width: 100%;">
<thead style="background: green; color: white;">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
</thead>
<tbody style="background: #f7f6f4; text-align: center;">
<tr>
<td>Mr Bro</td>
<td>575 77 857</td>
<td>575 77 857<td />
</tr>
</tbody>
</table> |
When you will test above code you will see a table like the table given below. It has a cell Named "Telephone" that spans two columns of the table.
| Name | Telephone |
|---|
| Mr Bro | 575 77 857 | 575 77 857 | |
The above table has two column spans but you can add many spans for a cell according to your need in a table. To do so just change the number of spans in
<th> tag.
How to add caption for a table
If you want to add caption to your table then add caption tag as the table starts after
<table> tag. Caption is used to add a title to the table. You can put
<caption> title for your table</caption> after starting table tag <table>. Below is the code of a table with caption. Observe this code carefully to understand the concept of caption for a table.
<table style="border: 3px solid #ccc; height: 150px; text-align: center; width: 100%;">
<caption> Example of caption </caption>
<thead style="background: green; color: white;">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
</thead>
<tbody style="background: #f7f6f4; text-align: center;">
<tr>
<td>Mr Bro</td>
<td>575 77 857</td>
<td>575 77 857<td />
</tr>
</tbody>
</table> |
When you will test above code the table with caption will look like this:
Example of caption | Name | Telephone |
| Mr Bro | 575 77 857 | 575 77 857 | |
Important information about table elements and there usage
It is very important for us to know about table elements and there usage to create a responsive table. The information about table elements and there usage is given below.
- <table> tag is used to start a table and </table> tag is used to close table.
- <tbody> tag stands for table body and used to create body of a table.
- <caption> tag is used create title of the table.
- <thread> tag is used to create header of a table.
- <th> tag is used to create a cell of header in table.
- <tr> tag stands for table row and used to create row in table.
- <td> tag stands for table data and used to create cell or columns in a table.
- </tbody> tag is used to close table body.
- </thread> tag is used close table <thread> tag.
- </th> tag is used to close <th> tag.
- </tr> tag is used to close <tr> tag.
- </td> tag is used to close <td> tag.
- </caption> tag is used to close <caption> tag.
If you have any problem, questions or suggestions then comment us now we are always here to help you. Your suggestions or important to us. Thanks
