Ep. 006 – Tables – Learn HTML and HTML5

access_timepersonjunaidte14folderTech, Web Programming

In the previous post, we have learned how to add images and videos to an HTML page. In this post, we will learn how to add tables with rows and columns to an HTML page.

Table Tag:

A table is a collection of rows and columns. To add a table to an HTML page, we use the <table> tag. To define a row inside the table we use the <tr> tag and to define a column inside a row, we use the <td> tag. See the following code example:

Code:

<table>
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 3, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

Output:

Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

As you can see above that even though the table is correctly displaying the rows and columns but it’s not looking like a table. So let’s add a border to the table. The “border” attribute is used to add a border to the table. See the following code example:

Code:

<table border="1">
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 3, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

Output:

Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Table Header:

To define head/header for the table, we can use the <thead> tag. The cells/columns inside the <thead> tag are added using the <th> tag. See the following code example:

Code:

<table border="1">
   <thead>
      <tr>
         <th>Column 1 Head</th>
         <th>Column 2 Head</th>
         <th>Column 3 Head</th>
      <tr>
   </thead>
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 3, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

Output:

Column 1 Head Column 2 Head Column 3 Head
Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Table Body:

The table body defines the main content of the table other than the table header or table footer. To define the table body area, we use the <tbody> tag.

Code:

<table border="1">
   <thead>
      <tr>
         <th>Column 1 Head</th>
         <th>Column 2 Head</th>
         <th>Column 3 Head</th>
      <tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 3, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </tbody>
</table>

Output:

Column 1 Head Column 2 Head Column 3 Head
Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Table Footer:

To define the table footer, we use the <tfoot> tag. See the following code example:

Code:

<table border="1">
   <thead>
      <tr>
         <th>Column 1 Head</th>
         <th>Column 2 Head</th>
         <th>Column 3 Head</th>
      <tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 3, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>Footer Section</td>
      </tr>
   </tfoot>
</table>

Output:

Column 1 Head Column 2 Head Column 3 Head
Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
Footer Section

Column Span:

To span a column across multiple columns, we use the “colspan” attribute of the <td> tag. See the following code example:

Code:

<table border="1">
   <thead>
      <tr>
         <th>Column 1 Head</th>
         <th>Column 2 Head</th>
         <th>Column 3 Head</th>
      <tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 3, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="3">Footer Section</td>
      </tr>
   </tfoot>
</table>

Output:

Column 1 Head Column 2 Head Column 3 Head
Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
Footer Section

Table Title:

We can also define a title text for the table inside the table header. See the following code example:

Code:

<table border="1">
   <thead>
      <tr>
         <td colspan="3">Table Title</td>
      </tr>
      <tr>
         <th>Column 1 Head</th>
         <th>Column 2 Head</th>
         <th>Column 3 Head</th>
      <tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 3, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="3">Footer Section</td>
      </tr>
   </tfoot>
</table>

Output:

Table Title
Column 1 Head Column 2 Head Column 3 Head
Row 1, Column 1 Row 2, Column 2 Row 3, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
Footer Section

Video Tutorial:

Tables – Learn HTML and HTML5

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section below. Thanks

Leave a Comment