|
Tables are another way to present information in an organized fashion. Tables can also be used to frame a webpage. It is very easy to get carried away when using tables, so some planning is advised. Unlike most of the XHTML tags that have depreciated their attributes in favor of CSS styling, the table family of tags still have a good bunch available to use.
A table definition is contained within table opening and closing tags,
<table>…</table>. After the opening table tag, the rows
of the table are defined with the table row opening and ending tags,
<tr>…</tr>. Within each set of table row tags, each data element
(or column) is defined using the table data tags, <td>…</td>. In between
the table data tags is the content of that cell of the table.
-
Add the following to your HTML file:
<table>
<tr>
<td>Semester</td>
<td>Course</td>
<td>Comments</td>
<td>Credits</td>
</tr>
<tr>
<td>Fall 2001</td>
<td>PL 100 First Philosophy<br />
MA 109 Calculus I<br />
EN 102 Language and Rhetoric
</td>
<td>None<br />
I barely survived this class.<br />
None<br />
</td>
<td>
3 <br />
3 <br />
3 <br />
</td>
</tr>
<tr>
<td>Spring 2002</td>
<td>CS110 Intro to C++<br />
BL 101 Intro to Plant Life<br />
HI 102 Early US History
</td>
<td> None<br />
I loved this class.<br />
None<br />
</td>
<td>
3 <br />
3 <br />
3 <br />
</td>
</tr>
</table>
It should appear as follows:
NOTE: You can see that there is no border seperating content, that content is centered vertically and left-justified and the headings are formatted the same as the content. All of these issues can be handled rather easily via CSS stylesheets.
- The
<table> tag supports a number of attributes (that can also be achieved using CSS). The border attribute controls the thickness of the default border (in pixels). Each browser has its own default style for a generic border, so using this attribute will not look consistent through different browsers. The cellpadding attribute controls the spacing between the table's cell walls and the cell content (in pixels). The cellspacing attribute controls the space between table cells (in pixels). The width attribute controls the width of the table (in pixels or percentage). The summary attribute holds a short description of the content of the table. There are a handful of rarely used attributes not discussed here.
- The
<tr> tag supports a few attributes. The align attribute controls the horizontal justification of the content of the cells within its row. The valign attribute controls the vertical alignment of the content of the cells within its row. There are a few rarely used attributes not discussed here.
- The
<td> tag supports a number of attributes as well. The abbr attribute contains the abbreviated content of the cell. The align attribute controls the horizontal justification of the content. The valign attribute controls the vertical alignment of the content. The colspan attribute controls how many columns the cell will spread across. The rowspan attribute controls how many rows the cell will spread across. There are a handful of rarely used attributes not discussed here.
-
First, let's address the appearance of the column headings.
There is another tag that can be used at the beginning of a table to define headings for the columns.
This set of tags is called the table heading tags,
<th>…</th>. The text between table
heading tags will appear in bold print and will be centered within the table cell. Replace the table
data tags <td>…</td> in the first row with table heading tags so that the first row
of the table now looks like this:
<tr>
<th>Semester</th>
<th>Course</th>
<th>Comments</th>
<th>Credits</th>
</tr>
- The
<th> tag supports a number of attributes as well. The abbr attribute contains the abbreviated content of the cell. The align attribute controls the horizontal justification of the content. The valign attribute controls the vertical alignment of the content. The colspan attribute controls how many columns the cell will spread across. The rowspan attribute controls how many rows the cell will spread across.
- Another set of tags available for use inside table tags is the
<caption> tag,
<caption>…</caption>. This tag will place a caption or title above the table.
Add the following line below the opening table tag:
<caption>Courses I have taken</caption>
-
Note that the caption appears centered above the table. An example of the code to this point is below followed by how it should appear in a browser.
<table>
<caption>Courses I have taken</caption>
<tr>
<td>Semester</td>
<td>Course</td>
<td>Comments</td>
<td>Credits</td>
</tr>
<tr>
<td>Fall 2001</td>
<td>PL 100 First Philosophy<br />
MA 109 Calculus I<br />
EN 102 Language and Rhetoric
</td>
<td>None<br />
I barely survived this class.<br />
None<br />
</td>
<td>
3 <br />
3 <br />
3 <br />
</td>
</tr>
<tr>
<td>Spring 2002</td>
<td>CS110 Intro to C++<br />
BL 101 Intro to Plant Life<br />
HI 102 Early US History
</td>
<td> None<br />
I loved this class.<br />
None<br />
</td>
<td>
3 <br />
3 <br />
3 <br />
</td>
</tr>
</table>
The <div> tag, which stands for division, is used to seperate entire blocks of XHTML. It is a block-style element, which means that it will force the browser to let it occupy it's own line. When used in combination with tables and CSS stylesheets, the <div> can be a very powerful asset.
The table family of tags also contains a few less frequently used tags for additional content control. These include the <colgroup> tag and the <col> which help apply control to columns. There is also the <thead> tag, the <tbody> tag and the <tfoot> tag which help split up the header, footer and body of the tables.
- A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
- HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html
- HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/
- HTML and XHTML Information www.w3c.org/markup
- HTML reference including browser suppport http://www.w3schools.com/html/html_reference.asp
- W3Schools HTML Tutorials http://www.w3schools.com/default.asp
- Willcam's Comprehensive HTML Cross Reference http://www.willcam.com/cmat/html/crossref.html
- Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
|