Welcome to Our Free Tutorial!

HTML Tables

In HTML table original purpose of tables was present tabular data. You can use table any where into the page layout, you will use HTML tags.

HTML Table are define with the <table> tag. A table is divided into row (<tr> tag) and each row divided into data cells(<td> tag. <td> tag stands for "Table Data", and insert the content in the table data cell.

A <td> tag contain Text, Images, Links, Forms, other tables, etc.

Table Example:-

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2 </td>
</tr>
<tr>
<td>row 2, cell 1 </td>
<td>row 2, cell 2 </td>
</tr>
</table>

Result:-

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


HTML Tables and Border Attribute:

If you want to specify a border attribute, the table will displayed with border above example show border table attribute. Some time this is very useful when you want to show border into table.
If you don’t want to specify a border attribute, the border will displayed without borders. We can specify the border=”0”(zero).

<table border="0">
<tr>
<td>Row 1, cell 1 </td>
<td>Row 1, cell 2 </td>
</tr>
</table>

Table Headers

Header information in a table are defined with the <th> tag.<th> stands for Table Header the text displayed bold and centered.

<table border="1" cellpadding="5" 
cellspacing="5" width="100%"> 
<tr>
<th>Header 1 </th>
<th>Header 2 </th>
</tr>
<tr>
<td>row 1, cell 1 </td>
<td>row 1, cell 2 </td>
</tr>
<tr>
<td>row 2, cell 1 </td>
<td>row 2, cell 2 </td>
</tr>
</table>

Result:-

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Other common attributes you can use with the table tag include width, height, cellspacing and cellpadding.
You can also specify the width of each table cell. The width can specified in pixels’ or percentages.

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="20%">Table cell 1 </td> <td>Table cell 2</td>
</tr>
</table>

Result:-

Table cell 1Table cell 2

Colspan

Colspan is another attribute to make a cell span multiple columns.

HTML Code:-

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Table header </th>
</tr>
<tr>
<td width="20%">Table cell 1 </td> <td>Table cell 2 </td>
</tr>
</table>

Result:-

Table header
Table cell 1Table cell 2

Colspan

Rowspan is basically for fows like colspan is for columns(rowspan allows a cell to span multiple rows).

HTML Code:-

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header </th> <td>Table cell 1 <td> 
</tr>
<tr>
<td>Table cell 2 </td>
</tr>
</table>

Result:-

Table headerTable cell 1
Table cell 2

Table Color

You can also apply color into your table using CSS. You can apply any CSS property into your table. For example, you can use CSS to apply width, padding, margin, etc

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th style="color:blue;background-color:yellow;" rowspan="2">
Table header </th> <td>Table cell 1 <td>
</tr>
<tr>
<td>Table cell 2 </td>
</tr>
</table>

Result:-

Table headerTable cell 1
Table cell 2