HTML : More about tables
In the last articles we discussed some of the fundamentals about the tables in HTML. In this article we will be discussing more about them. So let’s start with spacing and padding in HTML tables.
Adding padding and spacing to table cells
You can also specify a cell’s spacing and padding. Padding is the space between the cell’s content and the cell’s border. Spacing is the space between adjacent cell’s borders. Cell padding and spacing can be given either pixel values or percentages.
<table cellpadding=”5″ cellspacing=”10%” />
Percentages are the space’s or padding’s percentage of the table’s total height or total width. Unlike alignment, cellpadding and cellspacing are set in the <table> tag and can only be applied to the entire table. Individual cells cannot have different padding and spacing when using the cellpadding and cellspacing HTML attributes.
The cellpadding and cellspacing attributes
- Cellpadding=”n” (pixels) or “n%” (percentage): Specifies pixel space between cell content and cell wall.
- Cellspacing=”n” (pixels) or “n%” (percentage): Specifies pixel space between cells.
Adding headings to tables
You can assign headings to rows and columns using the <th></th> tags. The text in table headers is often emboldened. To specify a heading for a table’s columns, replace the first row’s table data cells with table header cells.
<tr><th>heading one</th><th>heading two</th></tr>
<tr><td>value one</td><td>value two</td></tr>
To specify a heading for a particular row, replace the first table data cell with a table header cell.
<tr><th>the header</th><td>the value</td></tr>
You can set a table header’s alignment and vertical alignment using the align and valign attributes, the same as a data cell.
Adding a caption to a table
A table can have a caption at its top. You add a caption to a table by placing <caption></caption> tags immediately after the <table> tag.
<table><caption>This is my table.</caption> … </table>
You should only have one caption per table and the <caption> tag must go immediately after the <table> tag. The caption is then centred just above the table.
Adding frame attributes to tables
In the early days of HTML, the only formatting you had for a table was its border. You couldn’t specify that only the right border or top border be displayed. Now this can be done using the frame attribute. You use frame in conjunction with the table’s border. The frame attribute instructs browsers which sides of an outside border should be visible.
Possible values for the frame attribute are: box, border, above, void, below, rhs, lhs, vsides and hsides. Border and box place four lines around the table, while void specifies that no outer box should be drawn. For example, if you set border to one and frame to void, then lines would appear dividing the cells into columns and rows, but no outer border would be rendered. Above places a single line above the table whiles below places a single line below. The lhs value places a single vertical line on the table’s left side while rhs places a single vertical line on the table’s right. The hsides value places horizontal lines above and below the table. The vsides value places vertical lines on both the right and left table sides.
