Table tags are used for displaying spreadhseet-like data neatly formatted in rows and columns. They can also be used to design page layouts by placing content into invisible rows and columns of a 'table'.
- Table -
<table> ... </table>
- Used to define a table, it contains all row and column tags along with their content. Think of it like the
bodytag, although there must always be at least one row in a table. It has some attributes to define the table layout.
border="?"- The size of the border (in pixels) surrounding the table
cellspacing="?"- The space (in pixels) between each cell, eg. between rows or columns
cellpadding="?"- The space, or margin, between the content of a cell and its border
- Table Row -
- To start a table row, the
trtags must appear within the
- Table Cell -
- A table cell is where the content goes. Cells must exist within rows, where the number of cells in a row determines the number of columns in the table. Cell properties can be set using the attributes:
align="?"- Alignment of text in the cell:
valign="?"- Vertical alignment of the cell:
width="?"- Specify a fixed with of a cell, by default they will only take up as much space as they need.
colspan="?"- Column spanning allows a cell to take up more than one column, in order to match layouts of other rows. Replace
?with the number of columns to span.
rowspan="?"- Row spanning, similar to column spanning, forces a cell to occupy more than one row.
nowrap- No text in the cell will be wrapped onto the next line. Similar to the
nobrtag for paragraphs
- Header Cell -
- Similar to a table cell, a header cell must appear within a table row. Normally found in the first row, header cells are usually shown in bold and centered by the browser.
A simple table with three rows and two columns.
<html> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell A1</td> <td>Cell B1</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> </tr> </table> </body> </html>
See another tables example with column and row spanning. Select 'view source' in your browser to view the html code.