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.
