HTML Tables

Tables in HTML
In HTML lists are a way of displaying data in some orderly way. What if more than one column of data is to
be displayed? For this we have tables in HTML. An HTML table has rows and columns. The table starts with
<table> and ends with the respective end tag </table>. An HTML table row starts with<tr> and
ends with </tr>. Inside the row we refer a typical column with <td> and </td>. This entire
thing will become clearer when we see the example below.

Example of an HTML Table
Code

<table>
<tr>
<td>Row1, Column1</td>
<td>Row1, Column 2</td>
</tr>
<tr>
<td> Row2, Column1</td>
<td> Row2, Column2</td>
</tr>
</table>
Output

Row1, Column1 Row1, Column 2
Row2, Column1 Row2, Column2

Seeing the output you should be able to get a better picture now. In the example above we have kept the
number of columns in the first row same as that of the second one. What will happen if we leave the second
column in the first row? Well in that situation, the table will still consist of two columns (i.e. the largest
column is picked up), but the second column remains blank.

See the output by yourself
Code
<table>
<tr>
<td>Row1, Column1</td>
</tr>
<tr>
<td> Row2, Column1</td>
<td> Row2, Column2</td>
</tr>
</table>

Output

Row1, Column1
Row2, Column1 Row2, Column2

Did you notice the gap? What if I want to give a heading of the columns? To do this, HTML provides the head
element.

<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>

Don’t you think it’s a little inconsistent? We have head without body? Yes, you are right just like the
<html> element, <table> also has two basic parts namely <thead&t; and <tbody>. And every
markup which doesn’t begin with <th> should come under <tbody>. After this revelation, lets move
to the example which has a heading also.

Example of HTML table with heading:
Code

<table>
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr>
<td>Row1, Column1</td>
</tr>
<tr>
<td> Row2, Column1</td>
<td> Row2, Column2</td>
</tr>
</tbody>
</table>

Output

Heading 1 Heading 2
Row1, Column1
Row2, Column1 Row2, Column2

Now we will learn some important Attributes of HTML Table on the next page.

  • 746 reads