How to make tables is HTML or Blogger
Now to make tables in html is not difficult, all you need to know is little HTML coding. Don't worry you don't have to learn HTML. So dont be like "Ohhh!! man why would I learn HTML coding just for making tables in my blogger's posts". Now we are going to use only few tags. Now what really are tags Hmmmm... Well tags are the codes in HTML e.g. <html>, <a>, <canvas> and there are alot of them. You don't have to learn all of these.
We are going to use following 3 tags:
- <table>...</table>
- <tr>....</tr>
- <td>......</td>
- <th>.......</th>
Don't get confused. <table> tag is the main tag. Every tag has an ending point which is similar to the starting tag but it has a forward slash '/' after the pointy brackets. <tr> stands for 'table row'. <td> stands for 'table data'. Now each <tr> tag form a single cell. Let me show you a little code.
<table>
<tr>
<td>
This is a cell.
</td>
</tr>
</table>
Now this will appear as normal text. You'll be like "oh!! this is no table, you cheat". Well no you dont see a table because there is only one cell and the second thing is that your table donot have any border or boundry. For adding a boundry we will use and attribute that is [border="your border size"] (*
<table border="3px">
<tr>
<td>
This is a cell.
</td>
</tr>
</table>
Now you will see a border and a single cell. Make sure to close your border size within the quotation marks. now lets just add another table data.
<table border="3px">
<tr>
<td>
This is a cell.
</td>
<td>
This is the second cell.
</td>
</tr>
</table>
Now you can add another table row (<tr>....</tr>) in the code.
<table border="3px">
<tr>
<td>
This is a cell.
</td>
<td>
This is the second cell.
</td>
</tr>
<tr>
<td>
This is a cell in 2nd row.
</td>
<td>
This is the second cell in 2nd row.
</td>
</tr>
</table>
Now the you might have learnt how to make tables but still you are a little confused and might think that where is the bloody heading. Well no need to worry to add heading to the table. You need to add a new tag call table heading or <th>.......</th>.
<table border="3px">
<tr>
<th>
Heading 1.
</th>
<th>
Heading 2.
</th>
</tr>
<tr>
<td>
This is a cell.
</td>
<td>
This is the second cell.
</td>
</tr>
<tr>
<td>
This is a cell in 2nd row.
</td>
<td>
This is the second cell in 2nd row.
</td>
</tr>
</table>
Look man this is pretty easy. All you need to know is a bunch of codes. Similarly you can make bigger tables by using the same tags and techniques.
This is the example of a table.
| Heading 1. | Heading 2. |
|---|---|
| The first cell in 1st row. | The second cell in the 1nd row |
| The first cell in 2st row. | The second cell in the 2nd row |
You must be thinking "No this is not good it look so boring". Well to design your table you need to know a little CSS. I will make another tutorial on CSS for table.
Hope it helped you and it worked for you. Thank you for reading!!!
