[an error occurred while processing this directive]
Go to Bottom Nav - April 21, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Tables are one of the most valuable tools for use in web pages. In addition to holding the traditional rows and columns of data, tables were used for layouts until they were supplanted by CSS styling. As with lists, you may nest tables within tables. Tables have disadvantages as well; they don't always act the same on each browser. Simpler tables usually display more consistently. Several simple tables can often do the job of one complex table with less construction headaches.

Tables have been replaced by CSS (Cascading Style Sheet) positioning for page layout in the main. However, a combination layout using tables and CSS for formatting is a useful for compatibility with older browers. And if you are working on an older web site, you will no doubt run into them.

Table Tags

Tables are constructed just like everything on a web page; left to right and top to bottom. Tables are comprised of rows of data cells.

Table code always begins with an opening table tag (<table>) and ends with a closing table tag (</table>). The closing tag is very important; some older browsers show no part of a table without the closing tag.

Each table will have at least one row. The table row tags look like this: <tr> and </tr>. All table cells are between table row tags.

The cells of the table hold the visible content (data) of the table. Table cells may contain text, images, lists, paragraphs, forms, and other tables (and more...). The contents of a table cell are surrounded by the table cell tags: <td> and </td>. These are also referred to as table data tags.

Below is the code to make a one rowed, three celled table. The rows and cells are indented for clarity.

<table>
  <tr>
    <td>Contents of row 1, cell 1.</td>
    <td>Contents of row 1, cell 2.</td>
    <td>Contents of row 1, cell 3.</td>
  </tr>
</table>

The table code is used below.

Contents of row 1, cell 1. Contents of row 1, cell 2. Contents of row 1, cell 3.

The structure of the table is hard to see in this case; it looks like three sentences. Add the border attribute to make the table visible. The code looks like this (and the results just below): <table border="3">

Contents of row 1, cell 1. Contents of row 1, cell 2. Contents of row 1, cell 3.

Tip: Using the border attribute can be very useful "quick and dirty" tool to make the table and table data cells border visible when constructing your table; remember that the border attribute is deprecated in HTML5. Styling will give you borders that validate.

In Summary

Tables build from the top down in rows of cells.

Table cells hold the content of the table.

Tables may be nested inside of the cells of other tables.

All tables must have an opening and a closing table tag (<table> </table>).

Each table must have at least one row (<tr> </tr>>).

Each table row must have at least one cell (<td> </td>).

The minimum set of tags to make a table (in proper order).

<table>
  <tr>
    <td>
Content of the table is held in the cell(s).</td>
  </tr>
</table>

Tables have many attributes; find out more here.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu