HTML Tables:
Â
| <table> </table> tags | <caption> tag | <tr> tag | <th> & <td> tags | Html Table example |
Let us start with the html tags used for creating tables.
(1)To create a table use <table> and </table> tags.
(2)To add a title to your table, <caption> and </caption> tags are used.
(3)To start a new row use <tr> and </tr> tags.
(4)To enter information in a cell, <td> and </td> tags are used.
(5)To insert headings in a table, <th> and </th> tags are used.
Let us create a very simple table.
<table>
<tr>
<td>my first table</td>
</tr>
</table>
Attributes of the <table> tag
The following is the complete syntax or general format for creating a table :
<table border=b bordercolor=bc align=center width=w% height=h% cellpadding=x cellspacing=x bgcolor=color>
border= Specifies the size of border
bordercolor= specifies the color of the border using either their rgb value or one of the set ones.
align= can be set to left, right or center and specifies where the table will appear on the browser window.
width= can be set in pixels or as a percentage of the browser window.
height= can be set in pixels or as a percentage of the browser window.
cellpadding= set in pixels. Specifies the space within each cell in which nothing will appear.
cellspacing= set in pixels, specifies the amount of blank space in between each cell
bgcolor= sets the background color of the table, once again use either the rgb value of the color or one of the set colors.
Attributes of the <caption> tag
This tag is used to create a caption for a table.
Attributes of the <tr> tag
This tag is used to create a new row in a table.
The following is the general format for <tr> tag:
<tr align=right valign=bottom bgcolor=blue bordercolor=yellow>
align= can be set to left, right or center. Specifies the alignment of text in each cell of that row
valign= can be set to top, bottom or center. Specifies the vertical alignment of text in each cell of that row
bgcolor= the same as the bgcolor attribute of the <table> tag except that this sets only the color for that row
bordercolor= the same as the bordercolor attribute of the <table> tag except that this sets only the color for that row
Attributes of the <th> and <td> tags
<th> tags are used to insert headings into a table.
<td> tags are used to create a new columns or cells in a table.
<Td> and <th> tags have the same attributes. See the following.
<Td align=right valign=top bgcolor=green bordercolor=black height=50 width=100 colspan=2 rowspan=3>
align= is the same as the attribute in the <tr> tag except that it effects only that cell
valign= is the same as the attribute in the <tr> tag except that it effects only that cell
bgcolor= is the same as the attribute in the <tr> cell except that it effects only that cell
bordercolor= is the same as the attribute in the <tr> tag except that it effects only that cell
height= is set in pixels and sets the height of the cell
width= is set in pixels and sets the width of the cell
colspan= is set to a number and sets the number of columns that cell will span
rowspan= is set to a number and sets the number of rows that that cell will span.
The rowspan and colspan are used for creating table with different cell width .
Eg: A Complete example
<html>
<head>
<title>Table Alignment</title>
</head>
<body >
<TABLE WIDTH=”50%” HEIGHT=”50%” CELLPADDING=”1″ CELLSPACING=”5″ BORDER=”1″ ALIGN=”middle”>
<CAPTION>This is Table Caption</CAPTION>
<TR>
<TD COLSPAN=”2″ ALIGN=”middle” VALIGN=”middle” bgcolor=yellow> Top Row </TD>
</TR>
<TR>
<TD ALIGN=”middle” VALIGN=”middle” bgcolor=gold> Number 1 </TD>
<TD ALIGN=”middle” VALIGN=”middle” bgcolor=gold> Number 2 </TD>
</TR>
<TR>
<TD COLSPAN=”2″ ALIGN=”middle” VALIGN=”middle” bgcolor=yellow> Bottom Row </TD>
</TR>
</TABLE>
</body>
</html>
| Top Row | |
| Number 1Â | Number 2Â |
| Bottom Row | |