Tables are designed to show tabular data (information that makes sense to show in rows and columns).
Here is a good example where we use tabular data, and thus it would make sense to show it in a table: A TV schedule. Here shows are organized by the channel they are on (usually in the rows) and by the time that they will be shown (usually in columns). If I want to know what is on a channel, I can follow the row of the channel, till I find a show I am interested in. Likewise, if I want to know what is on at 9PM, I can scan down the column.
Tables should be avoided for use in the layout of a webpage as they:
- Often require multiple tables to display correctly
- Require (potentially) lots of tags
- Are not friendly to people with vision impairments because screen readers have a difficult time reading the natural flow
What is a Table
- Made up of several tags
- for the table container itself
- <tr> – (table row) for each row in the table
- <th> – (table header) for each header cell – the text is bold and centered by default
- <td> – (table data) each cell
Creating a table can be done with the use of the create table button from the Insert Bar > Common. This will bring up a dialog box for designing your table to specify the number of rows, columns, width, etc.
Table can be fixed width or proportional width (%)
Each column will try to be the same width
Ways to change your table
- border
- table/table cell widths/height
- CSS styles
- set background color
- cell spacing
- cell padding
Sorting a Table
You cannot sort a table by just specifying a tag or attribute. You will generally need to either re-write the table, or use some JavaScript.
Using JavaScript will often let your end-user sort the table by different columns, so you don’t have to “know” what they will want. However, if you have a specific goal, then the best option may be to rewrite the table. Dreamweaver can do this for you with the Commands > Sort Table from the main menu.
Building HTML Tables was originally found on Access 2 Learn
