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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 |
<table bgcolor="value"> |
bgcolor="value" sets the background color of table, row or cell
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
|
1 |
<table cellspacing="value"> |
cellspacing="value" sets the spacing among cells.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 |
<tr align="right"> |
align="value" sets the text on left, center, right.
Example
|
1 2 3 4 5 6 7 8 9 |
<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
|
1 |
<tr valign="value"> |
valign="value" sets the text on top, middle, bottom.
Example
|
1 2 3 4 5 6 7 8 9 |
<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
|
1 |
<caption></caption> |
<caption></caption> are used to display the caption of the table.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<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
|
1 |
<tr height=value> |
height="value" sets the height of the row.
Example
|
1 2 3 4 5 6 7 8 9 |
<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
|
1 |
<td width="value"> |
width="value" sets the width of the column
Example
|
1 2 3 4 5 6 7 8 9 |
<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
|
1 |
<table bordercolor="blue"> |
bordercolor="blue" sets the table, row or cell border color.
|
1 2 3 4 5 6 7 8 9 |
<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.
|
1 2 |
<td rowspan="value"> <td colspan="value"> |
rowspan="value" or colspan=”value” specifies the numbers of rows or columns to span across.
Example for rowspan
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 |
<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.
