|
|||
| Prev | HTML Tables |
Next | |
HTML tables are controlled with five basic tabs. The <table> tag that encompasses a table, the <tr> tag that creates a row, the <th> and <td> tags that define a header cell and a data cell respectively. In addition, one might want to use the <caption> tag. The following table gives an overview of the most important attributes to the <table> tag:
| Attribute | Meaning |
|---|---|
| align | left, center, right | bgcolor | Either an RGB color value or a standard color name |
| border | Thickness of the border in pixels |
| bordercolor, bordercolorlight,bordercolordark | Browsers like to draw the border in a 3-d manner, using the latter two values to create shading. |
| cellspacing | Gives amount of space drawn around a table in pixels. |
| cellpadding | Amount of space between cell contents and cell border. |
| width, height | Width, height either in pixels or in percent. |
The most common layouts for tables are:
border="1" cellspacing="0" which produces
the narrowest layoutborder="5" cellspacing="0" produces a thick
external border with very small interior borders between cells.border="1" cellspacing="5" produces a equal
width exterior and interior borders with chisled egdes one pixel wide. All borders will be 5+2*1 pixels wide/The attribute <table width="500"> tells the browser
to make the table 500 pixels wide. This type of specification could be a bad
idea because the webpage writer does not know the display or the preferred browser
window size of the reader. An attribute <table width="80%">
is sometimes disregarded by the browser, but allows the webpage writer some
control over the outlay of the webpage.
We make a new row in a table by using the <tr> tag.
| Attribute | Meaning |
|---|---|
| align | default horizontal alignment of table contents: left, right, center,
justify, |
| bgcolor | |
| bordercolor, bordercolordark, bordercolorlight | |
| valign | vertical alignment: values are: top, bottom, baseline |
The individual cells are made with the <th> tag for header and the <td> tag for data cells. The most important attributes to learn are the colspan and rowspan attributes that allow you to build very nifty tables. Since table cell contents can be almost anything in html, including paragraphs and images, you can use a single table as a layout tool for webpages. If the webpage is very complicated, then this is not the best idea, and it does not offer the same type of consistency across a website as frames do, but it is quite simple to code and works well.
| Attribute | Meaning |
|---|---|
| align | left, right, center, justify |
| bgcolor | see above |
| bordercolor, bordercolordark, bordercolorlight | see above |
| char, charoff | used with alignment on a character |
| colspan | colspan=n means that this cell spans over n
columns |
| height | specifies minimum amount of cell height in pixels. |
| rowspan | rowspan=n means that this cell spans over n columns |
| valign | vertical alignment, values are top, bottom, baseline |
| width | width=400 or width=80% |
Let's look at a simple example for using colspan and rowspan.
<table align="center" width="90%" border=1 cellspacing="4"
bgcolor="#99FFFF">
<tr align="center">
<th rowspan="2" align="center">Team</th><th
colspan=3 align="center">Standings</th>
</tr>
<tr align="right">
<th >Won</th><th>Tied</th><th>Lost</th>
</tr>
<tr>
<td>Borussia Evergreen</td><td align="right">6</td><td
align="right">4</td ><td align="right">0</td>
</tr>
<tr>
<td>1FC Santa Clara</td><td align="right">7</td><td
align="right">0</td><td align="right">3</td>
</tr>
<tr>
<td>Eintracht Willow Glen</td><td align="right">5</td><td
align="right">1</td><td align="right">4</td>
</tr>
</table>
The first cell is one column wide and two rows high. The second cell is three columns wide and one column high. Here is the result
| Team | Standings | ||
|---|---|---|---|
| Won | Tied | Lost | |
| Borussia Evergreen | 6 | 4 | 0 |
| 1FC Santa Clara | 7 | 0 | 3 |
| Eintracht Willow Glen | 5 | 1 | 4 |
And now a more complicated example, where a single cell, in this case the first header cell, contains both colspan and rowspan. As a consequence, it extends over three columns and two rows:
<table width="90%" border="1" cellspacing="1"
cellpadding="1">
<tr>
<th colspan=3 rowspan=2 align="center">Header</th><th>Second
Header</th>
</tr>
<tr>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</table>
| Header | Second Header | ||
|---|---|---|---|
| 2,4 | |||
| 3,1 | 3,2 | 3,3 | 3,4 |
| 4,1 | 4,2 | 4,3 | 4,4 |
| ©2007 Thomas Schwarz, S.J., COEN, SCU | SCU | COEN | COEN1 | T. Schwarz |