CSS:Getting Started:Tables
From MDC
This page describes more advanced selectors, and some specific ways that you can style tables.
You create a new sample document containing a table, and a stylesheet for it.
[edit] Information: More selectors
CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.
Here is a summary of selectors based on relationships:
| Selector | Selects |
A E | Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.) |
A > E | Any E element that is a child of an A element |
E:first-child | Any E element that is the first child of its parent |
B + E | Any E element that is the next sibling of a B element (that is: the next child of the same parent) |
You can combine these to express complex relationships.
You can also use the symbol * (asterisk) to mean "any element".
An HTML table has an id attribute, but its rows and cells do not have individual identifiers:
<TABLE id="data-table-1"> ... <TR> <TD>Prefix</TD> <TD>0001</TD> <TD>default</TD> </TR> ... These rules make the first cell in each row bold, and the second cell in each row monospaced. They only affect one specific table in the document:
The result looks like:
|
| In the usual way, if you make a selector more specific then you increase its priority.
If you use these techniques, you avoid the need to specify In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements. For full details of selectors, see Selectors in the CSS Specification. |
[edit] Information: Tables
A table is an arrangement of information in a rectangular grid. Some tables can be complex, and for complex tables different browsers can give different results.
When you design your document, use a table to express the relationships between the pieces of information. Then it does not matter if different browsers present the information in slightly different ways, because the meaning is still clear.
Do not use tables in unusual ways to produce particular visual layouts. The techniques on the previous page of this tutorial (Layout) are better for that.
[edit] Table structure
In a table, each piece of information is displayed in a cell.
The cells in a line across the page make up a row.
In some tables, the rows might be grouped. A special group of rows at the start of the table is the header. A special group of rows at the end of the table is the footer. The main rows in the table are the body, and they might also be in groups.
The cells in a line down the page make up a column, but columns have limited use in CSS tables.
| The table of selectors near the top of this page has ten cells in five rows.
The first row is the header. The other four rows are the body. There is no footer. It has two columns. |
This tutorial only covers simple tables, where the results are fairly predictable.
In a simple table, every cell occupies only one row and column.
You can use CSS for complex tables where cells span (extend across) more than one row or column,
but tables like that are beyond the scope of this basic tutorial.
[edit] Borders
Cells have no margins.
Cells do have borders and padding. By default, the borders are separated by the value of the table's border-spacing property. You can also remove the spacing completely by setting the table's border-collapse property to collapse.
| Here are three tables.
The table on the left has 0.5 em border spacing. The table in the center has zero border spacing. The table on the right has collapsed borders:
|
[edit] Captions
A caption is a label that applies to the entire table. By default, it is displayed at the top of the table.
To move it to the bottom, set its caption-side property to bottom. The property is inherited, so alternatvely you can set it on the table or another ancestor element.
To style the text of the caption, use any of the usual properties for text.
This table has a caption at the bottom:
#demo-table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
|
[edit] Empty cells
You can display empty cells (that is, their borders and backgrounds) by specifying empty-cells: show; for the table element.
You can hide them by specifying empty-cells: hide;. Then, if a cell's parent element has a background, it shows through the empty cell.
| These tables have a pale green background. Their cells have a pale gray background and dark gray borders.
In the table on the left, the empty cell is shown. On the right, it is hidden:
|
| For detailed information about tables, see Tables in the CSS Specification.
The information there goes further than this tutorial, but it does not cover differences between browsers that can affect complex tables. |
[edit] Action: Styling a table
Make a new HTML document, doc3.html.
Copy and paste the content from here, making sure that you scroll to get all of it:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Sample document 3</TITLE> <LINK rel="stylesheet" type="text/css" href="style3.css"> </HEAD> <BODY> <TABLE id="demo-table"> <CAPTION>Oceans</CAPTION> <THEAD> <TR> <TH></TH> <TH>Area</TH> <TH>Mean depth</TH> </TR> <TR> <TH></TH> <TH>million km<SUP>2</SUP></TH> <TH>m</TH> </TR> </THEAD> <TBODY> <TR> <TH>Arctic</TH> <TD>13,000</TD> <TD>1,200</TD> </TR> <TR> <TH>Atlantic</TH> <TD>87,000</TD> <TD>3,900</TD> </TR> <TR> <TH>Pacific</TH> <TD>180,000</TD> <TD>4,000</TD> </TR> <TR> <TH>Indian</TH> <TD>75,000</TD> <TD>3,900</TD> </TR> <TR> <TH>Southern</TH> <TD>20,000</TD> <TD>4,500</TD> </TR> </TBODY> <TFOOT> <TR> <TH>Total</TH> <TD>361,000</TD> <TD></TD> </TR> <TR> <TH>Mean</TH> <TD>72,000</TD> <TD>3,800</TD> </TR> </TFOOT> </TABLE> </BODY> </HTML>
Make a new stylesheet, style3.css.
Copy and paste the content from here, making sure that you scroll to get all of it:
/*** Style for doc3.html (Tables) ***/
#demo-table {
font: 100% sans-serif;
background-color: #efe;
border-collapse: collapse;
empty-cells: show;
border: 1px solid #7a7;
}
#demo-table > caption {
text-align: left;
font-weight: bold;
font-size: 200%;
border-bottom: .2em solid #4ca;
margin-bottom: .5em;
}
/* basic shared rules */
#demo-table th,
#demo-table td {
text-align: right;
padding-right: .5em;
}
#demo-table th {
font-weight: bold;
padding-left: .5em;
}
/* header */
#demo-table > thead > tr:first-child > th {
text-align: center;
color: blue;
}
#demo-table > thead > tr + tr > th {
font-style: italic;
color: gray;
}
/* fix size of superscript */
#demo-table sup {
font-size: 75%;
}
/* body */
#demo-table td {
background-color: #cef;
padding:.5em .5em .5em 3em;
}
#demo-table tbody th:after {
content: ":";
}
/* footer */
#demo-table tfoot {
font-weight: bold;
}
#demo-table tfoot th {
color: blue;
}
#demo-table tfoot th:after {
content: ":";
}
#demo-table > tfoot td {
background-color: #cee;
}
#demo-table > tfoot > tr:first-child td {
border-top: .2em solid #7a7;
}
Open the document in your browser. It should look very similar to this:
Oceans
|
Compare the rules in the stylesheet with the displayed table, to ensure that you understand the effect of each rule. If you find a rule that you are not sure about, comment it out and refresh your browser to see what happens.
Here are some notes about this table:
- The caption lies outside the table border.
- If you have a minimum point size set in Options, it might affect the superscript in km2.
- There are three empty cells. Two of them allow the table background to show through. The third has a background and a top border.
- The colons are added by the stylesheet.
Change the stylesheet to make the table look like this:
|
[edit] What next?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
This is the last page in this tutorial that focusses on CSS properties and values. For a complete summary of properties and values, see Full property table in the CSS Specification.
The next page looks again at the purpose and structure of CSS stylesheets: Media