Tables in HTML

A  table is defined in html using the <table> tag. It is closed by the </table> tag. A table consists of rows and columns. Rows are defined using tr and columns using td. Html tables are in row major order meaning that columns are stored inside rows.
The following code will define a very simple table of 2X3 dimensions. Two rows and three columns.The border=”1″ attribute defines a border of 1 pixel.



<table border="1">

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>


<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

</table>


&nbsp;

1 2 3
4 5 6

th instead of td is used in the first row to make it bolder.



<table border="1">

<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>


<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

</table>


1 2 3
4 5 6

The th tag can be used in other rows apart from the first row as well.
The following table has 1 row and 2 columns of the second row highlighted.



<table border="1">

<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>


<tr>
<th>4</th>
<th>5</th>
<td>6</td>
</tr>

</table>


1 2 3
4 5 6

Table columns can contain any kind of html elements like textboxes, buttons, images, divs and tables as well.

Merging of Columns. Consider the following table.

1
2 3
4 5 6

The first row has a single columns covering 3 columns, the second row has 2 columns. First column is stretched to 2 columns and the rest are 1 column each.

1
2 3
4 5 6

To start with count the no of columns in each row. In this case the first row has 1 column, 2nd has two and the third has 3 columns.

Largest number of columns in a row is 3. Columns are stretched by using the colspan tag. A column has a default colspan of 1. If it is to cover 2 columns then its colspan will be 2. if it covers n columns then colspan will be n.

Colspans of each row must be equal. For this table it will be 3 for each row.

 

1(cols=3)
2(cols=2) 3(cols=1)
4(cols=1) 5(cols=1) 6(cols=1)

Here is the complete code for the table.


<table border="1">
<tr><td colspan="3">1</td></tr>
<tr><td colspan="2">2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>

1
2 3
4 5 6

Next is rowspan. Rowspan is used for merging rows.
Consider the following example.

1 2 3
4 5
6

Similar to the last example. Every column should have an equal number of rowspan sums and the total should equal the highest value. That number for our case is 3.

1(rows=3) 2(rows=2) 3(rows=1)
4(rows=2) 5(rows=1)
6(rows=1)

<table border="1">
<tr><td rowspan="3">1</td><td>2</td><td>3</td></tr>
<tr><td rowspan="2">4</td><td>5</td></tr>
<tr><td>6</td></tr>

</table>

We can also have tables where both rowspan and colspan. Consider the following example. The entries are being entered as (rowspan,colspan) format.

1(1,1) 2(1,2) 3(1,2)
4(1,3) 5(2,1) 6(2,1)
7(2,2) 8(1,1)
9(1,1) 10(1,2)

Here is the actual code


<table border="1" width="400px">
<tr><td>1</td><td colspan="2">2</td><td colspan="2">3</td></tr>
<tr><td colspan="3">4</td><td rowspan="2">5</td><td rowspan="2">6</td></tr>
<tr><td colspan="2" rowspan="2">7</td><td>8</td></tr>
<tr><td>9</td><td colspan="2">10</td></tr>
</table>

 

Leave a Reply