You came here to learn something about Tables. So here's a brief introduction into the mysteries of the tables HTML, which should help you to enhance your website design with an important structural feature.
Tables can be of use for many purposes and they are, like HTML in general, flexible and open for creativity.
However, there are some rules to observe to make sure the page comes up looking the way you want it to.
These are the commands (tags) you can use to create and format tables:
(n stands for a value in pixels, p for a value in percent, h for a hexadecimal value, x for an absolute number)
a | separates alternative values
You can go to the next page to see some sample codes. Of course, this here can be an example, too.
| TAG | What it does | What values can be changed |
|---|---|---|
| <table> | opens the table |
border="n" defines width of the borderline bordercolor="#hhhhhh" defines color of the borderline width="n|p%" defines overall width of the table *use preferably percent values! cellspacing="n" defines width of the boderlines between cells cellpadding="n" defines space between cell border and cell content bgcolor="#hhhhhh" defines background color for the entire table |
| </table> | closes the table | no values |
| <tr> | opens a table row | align="left|right|center" defines horizontal text and image alignment valign="top|middle|bottom" defines vertical alignment bgcolor="#hhhhhh" defines background color for this row |
| </tr> | closes table row | no values |
| <td> | opens table division (cell) |
align="left|right|center" defines horizontal text and image alignment valign="top|middle|bottom" defines vertical alignment bgcolor="#hhhhhh" defines background color for this cell nowrap disables the wrapping of long lines <colspan="x"> makes a cell go over x columns <rowspan="x"> makes a cell go over x rows |
| </td> | closes table division (cell) | no values |
| <th> | opens a header cell | behaves like <td> |
| </th> | closes a header cell | behaves like </td> |
That's for the theory. If you want to see some examples and example source codes as well as some tips 'n' tricks, go here.
If you have any questions, please do not hesitate to write me an email.