Introduction
Tables add a different dimension to displaying your contents and whether you have a football match fixture, menu, and song, price or grocery lists, putting them in a table format is certainly neater.For more table examples: Naruto|Naruto Shippuuden|Naruto and Naruto Shippuuden Movies|Bleach|Bleach movies
How To Create?
| No. | Element | New Element |
|---|---|---|
| 01. | Doton (Earth element) | |
| 02. | Suiton (Water element) | |
| 03. | Katon (Fire element) | |
| 04. | Futon (Wind element) | |
| 05. | Raiton (Lightning element) | |
| 06. | Suiton+Futon | Hyoton (Ice element) |
| 07. | Doton+Suiton | Mokuton (Wood element) |
The code for the above table is this:
<table border="1" cellpadding="1" cellspacing="0" width="450"><tbody>
<tr>
<th>No.</th>
<th>Element</th>
<th>New Element</th>
</tr>
<tr>
<td>01.</td>
<td>Doton undefinedEarth element)</td>
<td></td>
</tr>
<tr>
<td>02.</td>
<td>Suiton undefinedWater element)</td>
<td></td>
</tr>
<tr>
<td>03.</td>
<td>Katon undefinedFire element)</td>
<td></td>
</tr>
<tr>
<td>04.</td>
<td>Futon undefinedWind element)</td>
<td></td>
</tr>
<tr>
<td>05.</td>
<td>Raiton undefinedLightning element)</td>
<td></td>
</tr>
<tr>
<td>06.</td>
<td>Suiton+Futon</td>
<td>Hyoton undefinedIce element)</td>
</tr>
<tr>
<td>07.</td>
<td>Doton+Suiton</td>
<td>Mokuton undefinedWood element)</td>
</tr>
</tbody>
</table>
Note:
01. Every row starts with a <tr> tag and ends with a </tr> tag. In this example, we have 7 rows.
02. The <th> tags are used to mark the content as headers and such text will be bold by default to distinguish them from the other contents.
03. Within every row, we have the contents governed by the <td> undefinedtable data) tags. You would notice that in the first row, the first data cell “01.” begins with <td> and ends with </td>. Every data cell will have to be enclosed within such tags.
Tips
Insert all the code in "Edit Html". You can insert link or text formatting in "Compose"
Remove white space
You may see a lot of white space or gap at the top of the table. To remove this unnecessary space, you would need to compact the code and remove the line breaks. I have used a lot of line breaks in the above code so that you can better understand how the code works. Take the example of the above table code and compare with the code below:
<table border="1" cellpadding="1" cellspacing="0" width="450"><tbody>
<tr><th>No.</th><th>Element</th><th>New Element</th></tr><tr><td>01.</td><td>Doton undefinedEarth element</td><td></td></tr><tr><td>02.</td><td>Suiton undefinedWater element</td><td></td></tr><tr><td>03.</td><td>Katon undefinedFire element</td><td></td></tr><tr><td>04.</td><td>Futon undefinedWind element</td><td></td></tr><tr><td>05.</td><td>Raiton undefinedLightning element</td><td></td></tr><tr><td>06.</td><td>
Suiton+Futon</td><td>
Hyoton undefinedIce element</td></tr><tr><td>07.</td><td>Doton+Suiton</td><td>
Mokuton undefinedWood element)</td></tr></tbody></table>
