|<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.
<td>my first table</td>
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
<TABLE WIDTH=”50%” HEIGHT=”50%” CELLPADDING=”1″ CELLSPACING=”5″ BORDER=”1″ ALIGN=”middle”>
<CAPTION>This is Table Caption</CAPTION>
<TD COLSPAN=”2″ ALIGN=”middle”Â VALIGN=”middle” bgcolor=yellow> Top Row </TD>
<TD ALIGN=”middle” VALIGN=”middle” bgcolor=gold> Number 1 </TD>
<TD ALIGN=”middle” VALIGN=”middle” bgcolor=gold> Number 2 </TD>
<TD COLSPAN=”2″ ALIGN=”middle” VALIGN=”middle” bgcolor=yellow> Bottom Row </TD>
|Number 1Â||Number 2Â|