Week 11
Questions from last time?
Chapter 16: Tables
Tables were created to display data in tabular format, in rows and columns. However, in the early days of HTML, Web designers co-opted tables for use in laying out the content of their Web pages because they could control the placement of text and images by putting them into cells of tables. For such uses, the tables' borders were usually hidden. But now that CSS allows designers to control the placement of Web page content (and now that modern browsers support CSS positioning well), the use of tables for page layout is considered old fashioned. You will still find many pages that use the technique, however, because it still works reliably. But we will, in general, avoid the use of tables for layout.
Tables in HTML are coded as a series of table rows that contain cells (which can contain data or heading information). The <table>...</table> tags surround the table element. Rows in the table are surrounded by <tr>...</tr> tags. Cells in the rows are enclosed in either <td>...</td> tags (for cells containing table data), or <th>...</th> tags (for cells containing heading information. The <td> and <th> cells have different default formatting, and they make a structural distinction between their contents (either data or heading information).
Here is the HTML code for a simple table, with the resulting table shown below it:
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
<td>nine</td>
</tr>
</table>
| one | two | three |
| four | five | six |
| seven | eight | nine |
Note that in older versions of HTML, the <table> tag had several attributes which have all been deprecated under HTML5. For example, a <table> tag in older versions of HTML could look like this:
<table width="400" border="5" cellspacing="2" cellpadding="2">
We will discuss how to format tables using CSS to accomplish the same effects that were done using these deprecated attributes.
All rows of a table must contain the same number of cells (taking rowspans into account, which we will discuss later). If not, extra blank cell areas will be added to the end of the shorter rows. You may also get a warning from an HTML Validator if you do not have the correct number of cells in each row (this page, for example, gets an HTML5 validator warning caused by the example table below). In the table below, the second row has only two cells specified:
| one | two | three |
| four | five | |
| seven | eight | nine |
Table cells may contain text, images, divisions, form elements, etc., and may even contain other tables (nested tables). Some Web page layout that use tables may use multiple tables stacked one above the other (so that each table can be simpler), and may contain nested tables. Such layouts can become quite complex.
Table Borders
The <table> tag can include a border attribute. In older versions of HTML this attribute was used to specify the width (in pixels) of the border around the table (the border was shaded as if it was a bevel with the light coming from the upper-left), but in HTML5 the border attribute is only allowed to have the value 1 or the empty string, so border="1" or border="" are the only choices allowed in HTML5. You can also use the sloppier syntax of just including the border attribute with no value. In each of these three cases, the table will be displayed with borders between the cells, and a one pixel border around the outside of the whole table. Leaving out the border attribute altogether will display no borders between the cells, as seen in the table example above. Examples:
| border="1" | two |
| three | four |
| border="" | two |
| three | four |
| border | two |
| three | four |
You can also set the border of a table using CSS. The example below shows the CSS style rule used, the HTML code, and the resulting table:
.table1 { border: 5px solid orange; }
<table class="table1">
<tr>
<td>With CSS style:</td>
<td>two</td>
</tr>
<tr>
<td>table border comment</td>
<td>four</td>
</tr>
</table>
| With CSS style: .table1 | two |
| and no <table> border attribute | four |
If the <table> tag in the example above included the attribute border="1" or border="", then the resulting table would look like:
| With CSS style: .table1 | two |
| and <table border="1"> | four |
So you can see that the CSS border style applied to the table affects ONLY the exterior border, not the borders of the individual cells. The CSS border overrides the setting of the border attribute as far as the formatting of the external border is concerned. The default 1-pixel-wide borders on the cells appear only if there is a border attribute in the <table> tag, even if a CSS rule overrides the display of the external border. See the same table below (with <table> tag attribute border="1"), but with a CSS rule to turn off the display of the table border:
.table2 { border: none; }
| With CSS style: .table2 | two |
| and <table border="1"> | four |
Be sure to specify all the border properties (width, style, and color) or you may get a default value that is different in different browsers. Specifying all the values (such as in border: 5px solid orange;) will make sure you get the same result in all browsers. And, of course, you could make a CSS style that formats each part of the external border separately, such as this:
.table3 { border-top: 5px solid orange; border-bottom: 5px solid orange; border-right: none; border-left: none; }
| With CSS style: .table3 | two |
| and <table border="1"> | four |
Table Width
Because the width attribute of the <table> tag is deprecated in HTML5, you must use CSS to specify the width of the table. Example:
.table4 { width: 300px; }
| CSS style .table4 says width="300" | two |
| three | four |
If you specify the width as a percentage, this refers to a percentage of the parent element's width.
| CSS says width: 75%; | two |
| (that is, 75% of its parent div here) | four |
Tables with widths specified as percentages that are children of the <body> (or any element that changes width when the browser window is resized) will change width as the browser window is resized.
Note: If you do not specify a width, the browser will calculate the width needed for the table from its contents. This slows down the display of the table.
NOTE! If you specify a table width that is too small to contain the contents of the table, the browser will override your settings and make the table wider as needed to display the content
The table width does NOT include any padding or margins that you give the table itself using CSS styles.
Table Caption
Caption: You can add a caption to a table by placing a <caption>...</caption> element as the first element after the <table> tag:
| CSS sets width: 300px | two |
| three | four |
Note that the caption is centered above the table, and is wrapped to fit the width of the table.
There used to be an align attribute for the <caption> tag that had values "top," "bottom," "left," or "right" for placing the caption on other sides of the table, but it is deprecated in HTML5, and was not supported by all browsers anyway.
You could also add a caption to a table by putting the table inside a <figure> element (new to HTML5) and then use a <figcaption> element to make a caption for the table (which could be placed either above or below the table).
The <table> tag used to have a summary attribute for a long description of the table, but this attribute is deprecated in HTML5.
Table Data vs. Table Header Cells
In the table below, the cells in the top row use <th>...</th> (table header) tags instead of <td>...</td> (table data) tags. You can see that by default the contents of the th cells are bold and centered. You could, of course, change this formatting by creating a style that affects the th elements.
| one | two | three |
|---|---|---|
| four | five | six |
| seven | eight | nine |
Adding Padding to Cells
The deprecated cellpadding attribute of the <table> tag used to be for adding padding within the cells of a table. In HTML5 we use CSS styles to do this by applying padding to the <td> and <th> elements within a table. The padding adds space between the contents of a cell and cell boundary. In the three examples below, a different class style is applied to each of the tables below. Then, a descendent selector is used to apply padding to the <td> elements within the tables (except for the first table, which has no padding added to its cells). Note that the padding is being added to the <td> elements (the cells), NOT to the table itself.
| No padding added | two |
| three | four |
| td have padding: 5px | two |
| three | four |
| td have padding: 10px | two |
| three | four |
So, for the third table above, the CSS styles used were:
.tablep3 { width:300px; }
.tablep3 td { padding: 10px; }
If you want to add padding to both the <td> and <th> elements within a table (both the regular cells and the header cells), you could make a style rule like:
.tablex td, .tablex th { padding: 6px; }
...which would put 6 pixels of space around the contents of all cells inside any table with class="tablex".
Adding Spacing Between Cells
The deprecated cellspacing attribute of the <table> tag used to control the width (in pixels) of the internal spacing between the cells in a table. In HTML5 we now do this spaceing using the CSS border-spacing property. Examples:
| No CSS border-spacing | two |
| three | four |
| table has CSS border-spacing: 5px | two |
| three | four |
| table has CSS border-spacing: 10px | two |
| three | four |
The CSS style used for the third table above is:
.tablesp3 { width: 300px; border-spacing: 10px; }
Note that the CSS applies the border-spacing to the table, not to the cells.
Cellspacing applied with CSS appears even if borders are turned off for that table.
Centering a Table
In older versions of HTML, the <table> tag had an align attribute that can be used to center a table inside its parent element, but that attribute is DEPRECATED. The preferred method now for centering a table is using CSS. First, the table must have a width set, and then you must set the left and right margins of the table to auto. For example, the table below uses this style to center it horizontally within this division:
.table7 { width: 200px; margin: 0 auto 0 auto; }
| one | two | three |
| four | five | six |
| seven | eight | nine |
Flowing Text Around a Table
The deprecated align attribute of the <table> tag also had values to align it to the left or right and allow text to flow around it (similar to the DEPREATED align="left" and align="right" feature of the image tag). But, the align attribute is DEPRECATED, so you should not use it like that.
Instead, you can use the CSS float property to do the same thing. First, the table must have a width set, and then you must float it to the left of right. For example, the table below uses the style shown below to float it to the right and allow the text to flow around it:
.table8 { width: 200px; float: right; margin: 0 0 10px 10px; }
| one | two | three |
| four | five | six |
| seven | eight | nine |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Table Background
The <table> tag also used to have a bgcolor attribute that allowed you to give a table a background color, but this bgcolor attribute is DEPRECATED. Instead, you can use the CSS background properties that you already learned to add a background color or background image to a table:
.table9 { background-color:#66FF66; width: 300px; }
| one | two | three |
| four | five | six |
| seven | eight | nine |
.table10 { background: url(MammutAndJeff.jpg);
width: 400px; }
.table10 td { font-weight: bold; color: white; }
| one | two | three |
| four | five | six |
| seven | eight | nine |
| 10 | 11 | 12 |
| 13 | 14 | 15 |
| s16 | 17 | 18 |
| 19 | 20 | 21 |
Note that the background image of a table will be tiled horizontally and vertically by default, but using CSS you can control the tiling with the background repeat property.
Cell Widths
If you don't specify the widths of individual cells in a table, the browser will determine the width from the contents of the cells. The width of the widest cell in a column will be used as the width for all the cells in that column.
| one | two | three |
| four | five | six |
| seven | eight | Here's a longer line |
If the table has an overall width set (and the individual cells do not), then the browser will determine the cell widths and may wrap text as needed:
| one | two | (table width = 500) (no cell widths set) |
| four | five | six |
| seven | eight | this cell is automatically wider because it has more text in it |
| one | two | (table width =300) |
| four | five | six |
| seven | eight | In this case, the same table was set to 300 pixels wide, so the contents of this cell is automatically forced to wrap. |
Older versions of HTML allowed <td> and <th> tags to have a width attribute to set the width of a cell. But note that this is DEPRECATED. In HTML5 you use CSS applied to the <td> and <th> elements of the cells to set the widths. The table below (which has class="table5" in its <table> tag) has no widths set in the HTML of the table, but it uses the CSS style shown below to set the cell widths:
.table5 td { width: 75px; }
.table5 td.lastcol { width: 200px; }
| one | two | three | this cell has class="lastcol" |
| five | six | seven | eight |
Note that if a cell contains an image, the cell width is forced open wide enough to display the image (and the width of the table will expand if necessary to accommodate this). In the table below, which also has class="table5" and therefore has the width of all its cells set to 75 pixels by the style .table5 td { width:75px; }, you can see that the image (which is 267px wide by 255px tall) is forcing the first column wider than 75px. The image element is enclosed between the <td>...</td> tags of the cell.
| one | two | three |
 |
five | six |
A browser will sometimes unfortunately take width away from a column (making it narrower than you specified) if it wants to use the extra space in another column. Because images act like iron bars that prop a cell open, this unwanted squeezing of a cell can be prevented by putting an image of the needed width inside it (typically a 1x1 transparent image is used, which is resized to the width required).
 |
The large amount of text typed into this cell would normally cause the "empty" cell on the left to get squeezed to a very narrow width, but a transparent 1-by-1 pixel image (resized to a width of 100 pixels) is holding it open like an invisible brace. |
| The 1-by-1 pixel transparent image file (spacer.gif) is very small (1KB) so it downloads quickly, but the image can be resized to prop open cells to any width or height desired. |
Cell Heights
There is an attribute for the <td> and <th> tags that allows you to set the height of a cell, but (like the width attribute) it is DEPRECATED. Instead, you should use CSS styles to format the height of cells. For example, the table below has class="table6" and uses this style:
.table6 td { width:75px; height: 50px; }
| one | two | three |
| four | five | six |
| seven | eight | Here's a longer line |
You can see from the example above that the default vertical alignment of cell contents is in the middle.
Aligning Text in Cells
The align and valign attributes for <td> and <th> tags were valid in XHTML, but they have been DEPRECATED in HTML5. So now we use CSS applied to the cells to align the contents of cells horizontally and vertically. The text-align property can have the values left, right, center, and justify. The vertical-align property can have the values top, bottom, middle, or baseline. Example:
.table12 td { width: 170px; height: 75px; text-align: center;
vertical-align: top; }
.table12 td.five { vertical-align:
middle; }
| one | two | three |
| four | five | six |
Note that the cell containing the word "five" is using the .table12 td.five style because it has the HTML: <td class="five">five</td>
Cell Backgrounds
The <td> and <th> tags also used to have have a bgcolor attribute that allowed you to give any individual cell a background color, but this bgcolor attribute is DEPRECATED. Instead, you should use the CSS background properties that you already learned to add a background color or background image to a cell. In the example below, the first cell has <td class="yel"> and the last cell has <td class="jeff"> and use the styles:
.yel { background-color: yellow; }
.jeff { background: url(MammutAndJeff.jpg) -40px 0; }
| one | two | three |
| four | five | six |
IMPORTANT: Notice that putting a BACKGROUND image on a cell does NOT force the cell larger to allow the whole image to be displayed (as placing the image inside a cell does).
Cell Borders
As mentioned earlier, the <table> tag has an attribute that allows you to turn on the display of the default borders between cells, but CSS gives you even more control over the borders of the cells with the CSS border properties that you previously learned. In the example below, various borders have been placed on different parts of the table, which has class="moontable". You can study the CSS styles that format moontable in the internal style sheet of this page. (Don't worry about how the top row is all in one cell ...we'll get to colspan a little later.)
| Galilean Moons of Jupiter | |||
| Name | Distance (million km) |
Period (days) |
Radius (km) |
|---|---|---|---|
| Io | 422 | 1.77 | 1815 |
| Europa | 671 | 3.55 | 1569 |
| Ganymede | 1,070 | 7.15 | 2631 |
| Callisto | 1,883 | 16.7 | 2400 |
A problem with the table above is that the borders are not quite what I had in mind. When cells with similar border settings butt together, the borders get doubled. And where the cell borders meet the thicker outer border, I'd like only the thicker border to dominate. This can be managed by using the CSS border-collapse:collapse declaration. The table below is exactly the same as the one above, except that an extra class is used to add in the declaration border-collapse:collapse to the styles formatting the table. Note how the borders look different.
| Galilean Moons of Jupiter | |||
| Name | Distance (million km) |
Period (days) |
Radius (km) |
|---|---|---|---|
| Io | 422 | 1.77 | 1815 |
| Europa | 671 | 3.55 | 1569 |
| Ganymede | 1,070 | 7.15 | 2631 |
| Callisto | 1,883 | 16.7 | 2400 |
The CSS border-collapse property can also have the value separate that will give the same results as seen in the first moontable without borders collapsed.
Spanning Cells Across Columns and Rows
You can merge multiple cells together to create cells that span multiple rows or multiple columns (as seen in the top row of the moontable above where the first row has only one cell that spans all four columns of the table).
Colspan
To make a cell span multiple columns, add the attribute colspan="n" (where n is the number of columns to span) to the <td> (or <th>) tag of that cell. For example, the table below starts with this HTML:
<table border="1" class="table300">
<tr>
<td colspan="2" class="yel">This
cell spans 2 columns</td>
<td>three</td>
</tr>
...
| This cell spans 2 columns | three | |
| four | five | six |
| seven | eight | nine |
Notice that there is no cell "two" in this table; the space it would have taken up is now used by cell one. The total number of cells has to be the same in all rows, where any cells that span n columns are counted as n cells.
Rowspan
To make a cell span multiple rows, add the attribute rowspan="n" (where n is the number of rows to span) to the <td> (or <th>) tag of that cell. For example, the table below starts with this HTML:
<table border="1" class="table300">
<tr>
<td>one</td>
<td>two</td>
<td rowspan="2" class="yel">This cell <br
/>spans
two rows</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
</tr>
...
| one | two | This cell spans two rows |
| four | five | |
| seven | eight | nine |
Notice that there are only two cells specified for row 2. This is because cell three is taking up the space where cell "six" would have been. You have to ensure that the cell count comes out the same for all rows (you include any cell from a previous row that spans into another row as part of that row's cell count).
You can even have a cell with both a colspan AND a rowspan, as shown below:
| This cell has rowspan="2" and colspan="2" | three | |
| six | ||
| seven | eight | nine |
Controlling Word Wrap Within Cells
A browser may choose the wrap the text in your table cells while it is adjusting the content to fit the column widths. If you find that your text is breaking between words you would rather see stay together, you can prevent the wrapping in a couple ways.
You can put non-breaking spaces between words that you do not want to wrap. This will force the browser to leave the column containing that text content wider, since it won't be able to break those words apart.
You can use the CSS white-space:nowrap declaration applied to a cell or its content (a paragraph or span, for example) to prevent wrapping of that text.
You should avoid using the old nowrap attribute of the <td> tag to do this because it is DEPRECATED.
Table Row Formatting
You can also use CSS to apply alignment and background properties to the <tr> tag to affect all of the cells in a row. (You must do this with CSS because those attributes of the <tr> tag have been deprecated.) Formatting applied to an individual cell will override any formatting applied to its row.
Table Column Formatting
Although HTML tables are defined in terms of rows of cells, there are tags that allow you to specify formatting for the columns in a table. The <col> element allows you to specify formatting for one or more columns as a non-structural element of the table. The <colgroup> element lets you specify formatting for one or more columns and/or <col>s in the table as a structural element. The difference between the two is that a <colgroup> can have dividing lines (rules) that separate them from other elements.
Example: There is a table.
| Name | Yard Dimensions | Area | |
|---|---|---|---|
| Length | Width | ||
| Note: All yard dimensions are measured in feet. | |||
| Smith | 180 | 90 | 16,200 |
| Vigil | 250 | 120 | 30,000 |
| Romero | 70 | 90 | 6,300 |
| Wallin | 200 | 150 | 30,000 |
It may seem odd that I put the note about "all yard dimensions are measured in feet" near the top of the table when such a note usually would be added at the bottom of the table... but that is exactly where this note will end up (at the bottom) later... wait and see.
Below is the same table with <colgroup> and <col> elements used to format sections of the table. The HTML for the beginning of the table, and CSS used is shown below:
<table class="tablecoldemo">
<colgroup class="names">
<colgroup class="numbers">
<col span="2" class="dim" />
<col class="area" />
</colgroup>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Yard Dimensions</th>
<th rowspan="2">Area</th>
</tr>
<tr>
<th>Length</th>
<th>Width</th>
</tr>
<tr>
<td colspan="4">Note: All yard dimensions are measured in feet.</td>
</tr>
<tr>
<td>Smith</td>
<td>180</td>
<td>90</td>
<td>16,200</td>
</tr> ...
.tablecoldemo { width: 400px; border-spacing: 0;
}
.names { background-color:#FFFFFF; }
.numbers { width: 90px; }
.dim { background-color: #66CCFF; }
.area { background-color: #66CC66; }
| Name | Yard Dimensions | Area | |
|---|---|---|---|
| Length | Width | ||
| Note: All yard dimensions are measured in feet. | |||
| Smith | 180 | 90 | 16,200 |
| Vigil | 250 | 120 | 30,000 |
| Romero | 70 | 90 | 6,300 |
| Wallin | 200 | 150 | 30,000 |
The styles apply some widths and background colors or widths to the columns. I would also like to use CSS to apply some text alignments to the col and colgroup styles, but that is only supported by I.E. and Opera browsers (not Firefox or Safari). Most browsers will allow you to apply some formatting (such as width and background-color) to cols, but will not allow you to apply other formatting (such as text-align and color of the text), which I find annoying.
Table Horizontal Sections
There are also tags for specifying certain horizontal sections of your table: one header, one footer, and one or more table bodies. The <thead>...</thead> tags are put around the rows of the table header. The <tfoot>...</tfoot> tags are put around the rows that make up the footer of the table. The <tbody>...</tbody> tags are put around the rows that make up the body of the table (a table can have more than one body section). And now you get to see why I had to put that note line near the top of the table... Because in XHTML the three sections must appear in the order: <thead>, <tfoot>, <tbody>! Otherwise the page will not validate in XHTML. (The reason for this is so that the browser gets the header and footer information of the table first, before the possibly very long body section, and this helps it render the table for display faster.) In HTML5 the requirement that the <tfoot> element come before the <tbody> has been removed (you can put the <tfoot> after the <tbody> in HTML5), but a browser can render the table faster if the sections are arranged in the order <thead>, <tfoot>, <tbody> as explained above. Below is the HTML of the table and styles that were added (in addition to the ones above for the columns):
<table class="tablehoriz">
<colgroup class="names">
<colgroup class="numbers">
<col span="2" class="dim" />
<col class="area" />
</colgroup>
<thead class="ttop">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Yard Dimensions</th>
<th rowspan="2">Area</th>
</tr>
<tr>
<th>Length</th>
<th>Width</th>
</tr>
</thead>
<tfoot class="tbottom">
<tr>
<td colspan="4">Note: All yard dimensions
are measured in feet.</td>
</tr>
</tfoot>
<tbody class="tbod">
<tr>
<td>Smith</td>
<td>180</td>
<td>90</td>
<td>16,200</td>
</tr>
<tr>
<td>Vigil</td>
<td>250</td>
<td>120</td>
<td>30,000</td>
</tr>
<tr>
<td>Romero</td>
<td>70</td>
<td>90</td>
<td>6,300</td>
</tr>
<tr>
<td>Wallin</td>
<td>200</td>
<td>150</td>
<td>30,000</td>
</tr>
</tbody>
</table>
Styles:
.tablehoriz { border-spacing: 0; }
.tablehoriz td, .tablehoriz th { padding: 4px; }
.ttop { background-color: #336600; color:white; vertical-align: bottom;
}
.tbod { text-align: right; }
.tbottom { background-color: #336600; color: white; font-size: 0.75em; }
| Name | Yard Dimensions | Area | |
|---|---|---|---|
| Length | Width | ||
| Note: All yard dimensions are measured in feet. | |||
| Smith | 180 | 90 | 16,200 |
| Vigil | 250 | 120 | 30,000 |
| Romero | 70 | 90 | 6,300 |
| Wallin | 200 | 150 | 30,000 |
The <table> element previously had frame and rules attributes that would allow you to specify which sides of the table and cols that borders would appear on, but these attributes are depracated in HTML5. In HTML5, you use CSS to specify the top, right, bottom, or left borders as desired on the different elements of the table.
More Stuff
The table below demonstrates a couple other features. In the HTML of the table, you can see the use of the scope attribute of the <th> tags. The scope specifies whether the heading is for a column or row. The scope attribute is not required, but it provides additional structural information.
<table class="planets">
<thead>
<tr>
<th scope="col">Planet</th>
<th scope="col">Diameter (km)</th>
<th scope="col">Orbit Size (AU)</th>
<th scope="col">Note</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mercury</th>
<td>4,878</td>
<td>0.39</td>
<td>terrestrial planet</td>
</tr>
...
| Planet | Diameter (km) | Orbit Size (AU) | Note |
|---|---|---|---|
| Mercury | 4,878 | 0.39 | terrestrial planet |
| Venus | 12,104 | 0.72 | terrestrial planet |
| Earth | 12,756 | 1.00 | terrestrial planet |
| Mars | 6,794 | 1.52 | terrestrial planet |
| Ceres | 950 | 2.77 | dwarf planet |
| Jupiter | 142,984 | 5.20 | jovian planet |
| Saturn | 120,536 | 9.54 | jovian planet |
| Uranus | 51,118 | 19.18 | jovian planet |
| Neptune | 50,530 | 30.06 | jovian planet |
| Pluto | 2,290 | 39.48 | dwarf planet |
| Haumea | 1,300 | 43.12 | dwarf planet |
| Makemake | 1,420 | 45.79 | dwarf planet |
| Eris | 2,326 | 67.67 | dwarf planet |
Also used in the table above is a fancy CSS3 selector that is very useful when dealing with tables: the nth-child selector.
Here are the styles used for the table above:
.planets { width:100%; border-collapse: collapse; background-color: #99ff99; }
.planets td, .planets th { padding: 4px 6px; border-left: solid #336633 1px; border-right: solid #336633 1px; }
.planets thead { color: white; background-color: #339933; }
.planets tbody th {text-align: left; }
.planets tbody td {text-align: right; padding-right: 30px; }
.planets tbody tr td:nth-child(4) { text-align: left; padding: 4px 6px 4px 15px; }
.planets tbody tr:nth-child(even) { background-color: #88ee88; }
.planets tbody tr:nth-child(odd) { background-color: #99ff99; }
The first style provides overall formatting for the table, including a default background color. The second style sets the default padding and left & right borders of the td and th cells (the border-collapse setting in the first style prevents doubling of the borders). The third style formats the heading row. The fourth style aligns the row headings to the left.
The fifth style sets the alignmnet of the td cells in the tbody to right-aligned and adds padding to move the numbers away from the border.
But, I don't want the "Notes" column to be left aligned... so in the sixth style I use the td:nth-child(4) selector to apply different formatting to the 4th cell in the rows of the tbody. Note that this selects the fourth cell in the row even though it is technically not the 4th td (since the row starts with a th cell)...it assumes you really mean the 4th cell.
The seventh and eighth styles use the tr:nth-child(even) and tr:nth-child(odd) selector to target different formatting onto the even- and odd-numbered rows (tr elements) within the tbody. This is very cool, since trying to apply a different style to even and odd rows used to involve putting different classes on alternate rows...which was a real pain to edit if you later wanter to add a row or rearrange the rows. These CSS3 selectors will not work in older browsers, of course (which is why I included a default background color on the table, which would be seen in an old browser).
Layout With Tables
Although the preferred modern method for Web page layout is to use CSS and not tables, there are time when using a table may be quicker than wrestling with some CSS layout. Tables are great if you want to center some content vertically, since there is no easy way to do this with CSS that works in all browsers (the vertical-align CSS property that vertically aligns content withing a table cell does NOT produce the same effect when applied to other elements, such as a div). For example, a table is good for placing a caption line that is centered vertically next to an image:
|
The image on the left is of Mammut and Jeff |
Also, you may have to deal with editing a old page that is layed out with tables, so it doesn't hurt to understand how it's done.
When you use a table for layout purposes, you generally do NOT want the table borders to display. In older versions of HTML, this would be done by specifying <table border="0">, but HTML5 does not allow the border attribute to have a zero value specified. You could just leave out the border attribute, but you should also set the border-spacing: 0 in the CSS formatting of the table to be sure that spacing is removed . The layout table above uses the CSS styles:
.table14 { width: 100%; border-spacing: 0; }
.table14 td { text-align:center; vertical-align:middle; }
I have seen some reccomendations that any table which is being used for layout purposes should have border="0" attribute even though this will not validate under HTML5, just to make it clear that the table is being used for layout and not for the display of tabular data. This will give you an HTML5 validation error, of course.
Assignment 10 - Due Saturday, Nov. 23
You will be required to include one or more tables in your final project. You should think about what kind of table might actually be of use for your final project, and make it (or something similar to it) for this exercise.
Make a table (or more than one table) using as many of the features in today's lecture as possible (but don't use any deprecated attributes, since we want your page to validate as HTML5).
Your page must validate as HTML5 using the validator at: http://validator.w3.org/
Your CSS must validate using the validator at: http://jigsaw.w3.org/css-validator/
Send an email to tbeach@unm.edu that includes the URL to your main page for this assignment.
NOTE! The Subject line of this email should be "IT145 YourName Asg. 10"
You will be graded on:
How many of the features from today's lecture that you used.
How well you
followed directions
You sent the correct URL in your email.
The page validates using the validators listed above
Reading Assignment:
- Read Chapters 16 of HTML5 & CSS3 (for next week's class)