1. Tables are defined with the <table> tag.
2. A table is divided into rows with the <tr> tag. (tr stands for table row)
3. A row is divided into data cells with the<td> tag. (td stands for table data)
4. A row can also be divided into headings with the <th> tag. (th stands for table heading)
5. The <td> elements are the data containers in the table.
6. The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
7. The width of a table can be defined using CSS.
Creating a basic table
The basic structure of an HTML table consists of the following tags:
• Table tags: <TABLE> </TABLE>
• Row tags: <TR> </TR>
• Cell tags: <TD> </TD>
An HTML Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
An HTML Table with Collapsed Borders
If you want the borders to collapse into one border, add border-collapse to your CSS:
An HTML Table with Cell Padding
Cell padding specifies the space between the cell content and its borders.If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property:
HTML Table Headings
Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Polishing your table
An HTML Table with Cell Spacing. Cell spacing specifies the space between the cells.To set the cell spacing for the table, use the CSS border-spacing property:
You can set table background using of the following two ways:
• bgcolor attribute – You can set background color for whole table or just for one cell.
• background attribute – You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Table Height and Width
You can set a table width and height using width and height attrubutes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is depracated in newer version of HTML/XHTML.
Table Header, Body, and Footer
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
• <thead> – to create a separate table header.
• <tbody> – to indicate the main body of the table.
• <tfoot> – to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.