Home | CSS | Tables | Images | Typography | Layout | Designing for Devices | Color Theory | Forms | Dreamweaver Features | Resources | Accessibility

Tables

Tables are used to organize the way information is displayed on a web page. They come in all sorts of sizes and can contain pictures, links, and other types of data. Oftentimes, tables are used to display a web page better than simply hand-coding each item into place individually.

And it's for that reason that tables are important in a website. Take, for instance, the website http://www.quadcities.com uses tables to space out its images and link lists accordingly. This makes the site look much more professional in nature and easier to navigate.

Another nice thing that is nice about tables is that they can be coded (either by hand or with a WYSIWYG editor) to be fluid - that is, proportionate - with regards to the screen. This is in light of the fact that they could look odd, or cut off, when a non-maxed window is resized. This helps keep information in place and simple enough to read as it is needed.

Table Tags
Tag
Use
<table>
The <table> tag determines the start and end of a table. You can specify the entire width of the table, whether the table has a border, and the spacing to place between table cells.
<caption>
The <caption> tag places a text heading above the table, which labels the table for reference. For instance, a table containing a third-quarter financial report might have a caption of Q3 Financials.
<tr>
The <tr> tag defines the start and end of a table row.
<th>
The <th> tag defines a table header, which acts as a label for a group of table cells, whether they're in a row or a column.
<td>
The <td> tag defines a standard table cell.