HTML Tables

HTML tables are great way to tabulate different data inside a webpage. The <table> </table> tags are used for this purpose.

Within the table tags we have the table row tags as rows <tr> </tr>, and the table data tags as columns <td></td> which holds the data. He also have the table header tags <th></th> for adding header to the table.

HTML Table Example

<table border=”1″>
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
<td>Row 2, Column 4</td>
<td>Row 2, Column 5</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
<td>Row 3, Column 4</td>
<td>Row 3, Column 5</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
<td>Row 4, Column 4</td>
<td>Row 4, Column 5</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
<td>Row 5, Column 4</td>
<td>Row 5, Column 5</td>
</tr>
</tbody>
</table>

RESULT of HTML Table above will be

Header 1 Header 2 Header 3 Header 4 Header 5
Row 1,
Column 1
Row 1,
Column 2
Row 1,
Column 3
Row 1,
Column 4
Row 1,
Column 5
Row 2,
Column 1
Row 2,
Column 2
Row 2,
Column 3
Row 2,
Column 4
Row 2,
Column 5
Row 3,
Column 1
Row 3,
Column 2
Row 3,
Column 3
Row 3,
Column 4
Row 3,
Column 5
Row 4,
Column 1
Row 4,
Column 2
Row 4,
Column 3
Row 4,
Column 4
Row 4,
Column 5
Row 5,
Column 1
Row 5,
Column 2
Row 5,
Column 3
Row 5,
Column 4
Row 5,
Column 5

NOTE: Notice that the header already comes in “bold” format.