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
<table border="1">
creates a table with the border with 1 pixels.
<tr></tr>
specifies the rows of the table.
<td></td>
specifies the cell of the table and its contents.
colspan="3"
specifies the 3 columns that will be spanned across.
align="center"
sets the next aligning to the center.