HTML Table

Table contains columns and rows which are used to show the data in HTML.

<table></table> are table tags.

<table border=value></table> creates a table with borders.

<tr></tr> are row tags.

<td></td> are cell tags.

Example:

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

Output:

Explanation:

<table border="1"> creates a table with the border width 1 pixels.

<tr></tr> specifies the rows of the table.

<td>cell 1</td> specifies the cell of the tables and its content.

Width & Height

<table width="value" height="value">

The attribute “width” specifies the width of the table. The attribute “height” specifies the height of the table.

The value can be a percentage or pixels.

Example

<html>
<table  border="2" width="200" height="30%">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</html>

Output:

Explanation

border="2" sets the table border width as 2 pixels.

width="200" sets the table width as 200 pixels.

height="30%" sets the table height as 30% of the browser window.

Background Color

<table bgcolor="value">

bgcolor="value" sets the background color of table, row or cell

Example

Out<html>
<table  border="1"  bgcolor="yellow">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</html>

Output

Explanation

bgcolor="yellow" sets the background color as yellow.

Cell Spacing

<table cellspacing="value">

cellspacing="value" sets the spacing among cells.

<html>
<table  border="1" cellspacing="10">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</html>

Output

Explanation

cellspacing="10" sets the cells spacing as 10 pixels.

Align Text

<tr align="right">

align="value" sets the text on left, center, right.

Example

<html>
<table  border="1" width="400">
<tr align="right">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</html>

Output

Explanation:

<tr align="right"> sets the text aligning with the right side.

Valign Text

<tr valign="value">

valign="value" sets the text on top, middle, bottom.

Example

<html>
<table  border="1" width="400" height="200">
<tr valign="middle" align="center">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</html>

Output

Explanation:

valign="middle" sets the text aligning with the middle.

Caption

<caption></caption>

<caption></caption> are used to display the caption of the table.

Example

<html>
<table  border="1" width="400">
<caption>Table Caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</html>

Output

Explanation

<caption>Table Caption</caption> displays the Table Caption.

The Height of Row

<tr height=value>

height="value" sets the height of the row.

Example

<html>
<table  border="1">
<tr height="50">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</html>

Output

Explanation

<tr height="50"> sets the height of the row as 50.

The width of Column

<td width="value">

width="value" sets the width of the column

Example

<html>
<table  border="1">
<tr>
<td width="100">Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</html>

Output

Explanation

width="100" sets the width of the cell as 100 pixels.

Border Color

<table  bordercolor="blue">

bordercolor="blue" sets the table, row or cell border color.

<html>
<table  border="1" bordercolor="blue">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</html>

Output

Explanation

bordercolor="blue" sets the table border as blue.

Span Rows, Columns

A cell can span across a number of rows or columns.

<td rowspan="value">
<td colspan="value">

rowspan="value" or colspan=”value” specifies the numbers of rows or columns to span across.

Example for rowspan

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

Output

Explanation

rowspan="2" specifies the 2 rows that will be spanned across.

Example for colspan

<html>
<table  border="1">
<tr>
<td colspan="3" align="center">Cell 1</td>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</html>

Output