| inline-table
|
As ; displayed as an inline box.
| table
|
As ; displayed as a block box.
; a row of table cells.
| table-caption
|
As | ; displayed before, after, or beside the table.
| table-cell
|
As | or | ; an individual table cell.
|
| table-column
|
As <col>; not displayed but can be used for formatting.
|
| table-column-group
|
As <colgroup>; not displayed but can be used for formatting.
|
| table-footer-group
|
As <tfoot>; designates a group of footer rows.
|
| table-header-group
|
As <thead>; designates a group of header rows.
|
| table-row
|
As | |
| table-row-group
|
As <tbody>; designates a group of rows.
|
Because these values are built into the browser, you won't ever actually need to change the display property to work with tables, but it is useful to know how CSS considers each. For example, CSS classifies | and | as the same type of display property.
Table cells in CSS are treated as block boxes; they can contain inline or block content and are contained by table-row block boxes. Table rows and groups of table rows are used primarily for grouping. Usually, styles can't be applied to them directly, although properties that are inherited can be set on rows or groups of rows and will apply to cells ( | or | ) within those rows.
In general, applying styles to table cells is straightforward and follows all the normal rules of cascade and inheritance; nearly any CSS properties can be set on table cells. There are a few exceptions, however, so before you go on, I'll spend some time looking at how CSS styles interact with HTML tables.
Layers and Inheritance
One key way in which tables differ from other block boxes is the introduction of table layers into the inheritance method. Each cell is considered to be a descendant of several other layers of markup, as shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17table02 Table 17.2].
| Layer
|
Equivalent HTML
|
| cells
|
| , |
|
| rows
|
|
| row groups
|
<thead>, <tbody>, <tfoot>
|
| columns
|
<col>
|
| column groups
|
<colgroup>
|
| table
|
The most surprising thing about table layers is that they exist even if the actual tags do not! For example, all cells are part of a row group, even if there are no <thead>, <tbody>, or <tfoot> tags in the document. It is assumed that there is an unstated, invisible <tbody> surrounding all table rows that aren't already within a row group. Likewise, all cells are part of columns and column groups.
When considering the appearance of a table cell, you need to take into account the effects of these table layers. For example, the background-color property is normally transparent unless otherwise specified. This means that the background of the containing box of the is visible. If background-color is set on a <tbody>, that is the cell's background color, unless the property is set on a or a table cell, which are more specific, according to the table layers model.
Automatic and Fixed Layouts
The browser usually automatically determines the dimensions of the table's box and of the box sizes of each cell within it. Browsers generally follow the same method of calculating the size, but this is not a requirement, and in fact the CSS Level 2.1 specification allows browsers to use whatever method they like to size a table and its cells. This is called an automatic layout.
However, in many cases you need more control over the dimensions of the table. At those times, you'll want to use a fixed layout, one where the width and cells of the table are specified in the CSS rules. To tell the browser you're working with a fixed layout, use the table-layout property. Values for table-layout are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17table03 Table 17.3]; the default is auto. This property can be set only on table elements.
| Value
|
Effect
|
| auto
|
Let the browser determine the dimensions of the table and table cells.
|
| fixed
|
Explicitly designate the width of each table cell.
|
| inherit
|
Use the value of table-layout set on the containing block.
|
After you have informed the browser that you're using a fixed layout, you then need to define the widths of each column. You do this by setting the width property on the table and on each table cell. The value of the width property can be either a measurement, such as 300px or 6em, or a percentage value.
Did you Know?
The width property can be used with other block elements, as well; you'll learn more about this useful property in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18], "Box Sizing and Offset."
The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex02 Listing 17.2] sets the table-layout property to fixed and provides width values for the table and for each table cell. A border is drawn around each cell to make the widths more apparent.
Listing 17.2. Style Sheet with Fixed Layout
/* schedule-17.2.css */<br />table { table-layout: fixed;<br />width: 90%; }<br />td, th { width: 15%;<br />border: 2px solid gray; }<br />
|
Applying this style sheet to the schedule table from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex01 Listing 17.1] produces the effects shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig02 Figure 17.2]. The primary advantage of a fixed layout is that it displays faster because the browser doesn't have to calculate the column widths.
Figure 17.2. Firefox displays a schedule with a fixed layout.
File:17fig02.jpg
Table Borders, Padding, and Spacing
Like other block display boxes in CSS, table cells can be surrounded by borders and can have internal padding. Unlike other block boxes, though, a table cell never has a margin on any side. Instead, table styles are used to control spacing around table cells.
The appearance of a table cell's borders is affected by several properties that determine which cells display borders and how adjacent borders interact with each other.
Displaying or Hiding Empty Cells
If you looked carefully at [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig02 Figure 17.2], you might have noticed something unusual: Only cells that contained content had borders drawn around them. This can be an effective way of presenting information in some circumstances, but in others you are going to want a border drawn around all table cells, even those that are empty. You can control the display of borders around table cells by using the empty-cells property.
The empty-cells property can be set only on table elements, and the valid values for this property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17table04 Table 17.4]. The default is hide, which means borders aren't shown for empty cells.
| Value
|
Effect
|
| hide
|
Don't display borders for empty cells.
|
| show
|
Display appropriate borders for empty cells.
|
| inherit
|
Use the value of empty-cells set on the containing box.
|
By setting empty-cells to show, you are telling the browser that if a cell is empty, it can go ahead and apply whatever border style would be used if the cell contained content. If there is no applicable border to use, the cell isn't displayed. Setting only the empty-cells property without the appropriate border properties (or the border shorthand property) is ineffective.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex03 Listing 17.3] contains rules for several styles of borders, along with an empty-cells: show declaration on the table.
Listing 17.3. Turning on Borders Around Empty Cells Via the empty-cells Property
/* schedule-17.3.css */<br />table { table-layout: auto; width: 90%;<br />font-size: large;<br />empty-cells: show; }<br />td, th { width: 15%; }<br />thead th { border: 0.20em dashed gray; }<br />tbody th { border: 0.25em solid black; }<br />td { border: 0.10em solid gray; }<br />
|
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig03 Figure 17.3], you can see the results of applying this style sheet to [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex01 Listing 17.1]; a border surrounds every table cell, in contrast to [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig02 Figure 17.2].
Figure 17.3. Empty cells become visible, as shown by Firefox.
File:17fig03.jpg
Collapsing Borders
Within CSS you can have two options for how you want table cell borders to be handled: They can either collapse or remain separate. You can choose which of these two display models to use by setting a value for border-collapse on your element; appropriate values are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17table05 Table 17.5].
| Value
|
Effect
|
| collapse
|
Collapse adjacent borders together.
|
| separate
|
Keep adjacent borders separated.
|
| inherit
|
Use the value of border-collapse set on the containing box.
|
In the collapsed border model, two cells that are adjacent, horizontally or vertically, share a single, common border line between them. There is no space between the cells; one ends where the other begins. You'd use this to produce a clean, simple table presentation where the cells aren't separated within distinct boxes. This is a style choice you'd make based on how you envision the final look of the table.
If two adjacent cells have different border properties set on them, the border is based on the most visible border of the two. A wider border takes precedence over a narrow border. If two borders are the same width, the border-style determines which one is chosen; in order from most important to least important, a border-style value of double takes precedence over solid, dashed, dotted, ridge, outset, groove, and inset. If two border declarations have the same width and style and differ only in color, a rule set on a more specific layer takes precedence; a style on a table cell beats a row, row group, column, column group, or table rule. Otherwise, normal CSS cascading order is followed.
An example of collapsed borders is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex04 Listing 17.4]. This table has different border values for | and | elements in the table heading and body.
Listing 17.4. Style Sheet to Collapse Borders Between Cells
/* schedule-17.4.css */<br />table { table-layout: auto; width: 90%;<br />border-collapse: collapse;<br />font-size: large; empty-cells: show; }<br />td, th { width: 15%; }<br />thead th { border: 0.20em dotted gray; }<br />tbody th { border: 0.25em solid black; }<br />td { border: 0.10em solid gray; }<br />
|
The effect of collapsing these borders can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig04 Figure 17.4].
Figure 17.4. Collapsed cell borders displayed by Firefox.
File:17fig04.jpg
Separated Borders
Table cells can also be displayed with space between them. This is known as the separated borders model and is selected by a rule on the cell setting the border-collapse property to separate. You'd choose this stylistic approach if you want cells presented as a distinct box, with a background surrounding each one. For example, a table meant to look like a telephone keypad would use separated borders.
In HTML, the spacing between cells is set by the cellspacing attribute; in CSS the same effect is accomplished by the border-spacing property. The border-spacing property sets the distance between the outer edge of adjacent cellsin other words, the spacing between each border. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17table06 Table 17.6] indicates the possible values for border-spacing; if one value is given, that sets both the horizontal and vertical border-spacing; if two are supplied, the first is the horizontal spacing and the second is the vertical. The space between cells displays the background of the table.
| Value
|
Effect
|
| measurement
|
Set the horizontal and vertical cell-spacing to the same value
|
| measurement measurement
|
Set the horizontal and vertical cell-spacing, respectively
|
| inherit
|
Use the value(s) for border-spacing set on the containing box.
|
Watch Out!
Current versions of Internet Explorer do not support the border-spacing property.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex05 Listing 17.5] is a style sheet that you can apply to the schedule from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex01 Listing 17.1]; it displays the cells with a horizontal spacing of 0.45em and a vertical spacing of 1em.
Listing 17.5. Increasing the Spacing Between Cells Using the border-spacing Property
/* schedule-17.5.css */<br />table { table-layout: auto; width: 90%;<br />border-collapse: separate;<br />font-size: large; empty-cells: show;<br />border-spacing: 0.45em 1em; }<br />td, th { width: 15%; }<br />thead th { border: 0.20em dotted gray; }<br />tbody th { border: 0.25em solid black; }<br />td { border: 0.10em solid gray; }<br />
|
As you can see from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig05 Figure 17.5], the applied style sheet spaces out the cells appropriately in the schedule.
Figure 17.5. Firefox displays spacing between cells.
File:17fig05.jpg
| Try it Yourself: Styling Your Weekly Calendar
To get your hands dirty with table styles, why not make your own weekly schedule?
1.
|
Create an HTML table containing your weekly schedule.
|
2.
|
You can break it down into the hours of each day, and then group morning, afternoon, and evening rows, using <tbody> elements.
|
| >
|
>
|
3.
|
Set specific styles for the | and <thead> elements that are the headers for your columns and rows.
|
4.
|
Select border styles that fit your personal preferences. Try both the separated and collapsed border models, and see which one you like best. Do you want to display borders around empty cells?
|
|
Table Captions
The HTML | tag gives the caption, which is a label for a table. This appears within the element as the first child, and it is usually presented before the table. The display box containing the is as wide as the table itself.
The location of the caption isn't fixed; the CSS caption-side property can be used to place the caption on a different side of the table box. The values for caption-side are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17table07 Table 17.7]. This property can be set only on elements, and the default value is top.
| Value
|
Effect
|
| bottom
|
Caption appears after the table.
|
| top
|
Caption appears before the table.
|
| inherit
|
Uses the value of caption-side set on the containing box.
|
Watch Out!
Internet Explorer does not support the caption-side property. Your caption always appears before the table rows in Internet Explorer.
The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex06 Listing 17.6] moves the caption from the top to the bottom and sets specific font and box properties on the caption, as well. The default styling for in most browsers is the default font, centered above the table.
Listing 17.6. Style Sheet to Move the Caption to the Bottom of the Table
/* schedule-17.6.css */<br /><br />table { table-layout: auto; width: 90%;<br />border-collapse: separate; font-size: large;<br />border: 6px double black;<br />padding: 1em;<br />margin-bottom: 0.5em; }<br />td, th { width: 15%; }<br />thead th { border: 0.10em solid black; }<br />tbody th { border: 0.10em solid black; }<br />td { border: 0.10em solid gray; }<br /><br />caption { caption-side: bottom;<br />font-size: x-large; font-style: italic;<br />border: 6px double black; padding: 0.5em; }<br />
|
The results of applying this style sheet to the schedule from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex01 Listing 17.1] can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig06 Figure 17.6]; notice that the widths of the table and the caption are the same.
Figure 17.6. The caption displayed after the table, by Firefox.
File:17fig06.jpg
Styling Columns
As noted before, each cell in a table is part of a column in addition to being in a row. Cascading Style Sheets can be used to affect the presentation of columns, but only within certain parameters. If you need to apply a set of style rules to a specific column, such as making the third column of cells have a black background, there are two approaches. The first way to do this is to set the third cell of every row to the same class and then to write a class selector. The second is to write selectors based on columns.
To designate a column or a group of columns, you use the <col> and <colgroup> tags. These can be given class or id attributes to be used in selectors, or they can have style attributes for inline styles.
You'll extend your schedule markup by adding the <colgroup> and <col> tags in your example. Add the following lines to the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex01 Listing 17.1] immediately after the tag to define the columns:
<colgroup>
<col id="time">
</colgroup>
<colgroup id="days">
<col id="mon">
<col id="tue">
<col id="wed">
<col id="thu">
<col id="fri">
</colgroup>
These tags define specific identifiers for columns, which you can use in your CSS rules with id selectors. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex07 Listing 17.7] contains several examples of these types of selectors.
Listing 17.7. A Style Sheet Based on Columns
/* schedule-17.7.css */<br /><br />table { table-layout: auto; width: 90%;<br />empty-cells: show; font-size: large; }<br />td, th { width: 15%; }<br />tbody th { border-top: 2px solid black; }<br />tbody td { border-top: 2px solid black; }<br />caption { caption-side: top; text-align: right;<br />font-size: x-large; font-style: italic; }<br />col#mon { background-color: silver; }<br />col#tue { background-color: black;<br />color: white; /* Note: color rule is ignored! */ }<br />col#wed { background-color: violet; }<br />col#thu { background-color: yellow; }<br />col#fri { background-color: lime; }<br />
|
Only certain types of properties are allowed in column or column group rules; other properties are ignored. The appropriate properties are background and related properties; width; visibility; and the border properties. The visibility property can take the value of collapse to hide an entire column; the border properties are respected only if the collapsing border model has been chosen with the border-collapse property.
Watch Out!
Opera and Safari do not support the use of columns and column groups in selectors. To set styles on specific columns in these browsers, you will need to set class attributes on specific table cells and use appropriate class-based selectors.
The effects of applying the style sheet from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex07 Listing 17.7] to the modified HTML page, with added column markup, can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig07 Figure 17.7]. Note that the rule setting text color on Tuesday is ignored because only background, width, visibility, and border can be set on columns, but the background-color rule was still applied. This leads to black-on-black text, which is unreadable. Be careful that you aren't hiding text like this accidentally.
Figure 17.7. The effects of applying the columnar style.
File:17fig07.jpg
./ ADD NAME=CH17LEV1SEC2.HTML
Applying Other Styles to Tables[wax ka badal]
Nearly any other styles that can be applied to block elements can be applied to tables or table cells; the primary exception is that table cells never have margin properties. To set the spaces between table cells, you would instead use a separated-borders model, as described earlier, and set the border-spacing property on the table. The effect is the same as setting the margin between the cells.
Horizontal Alignment
As with other block boxes, the alignment of inline elements inside a table cell can be set with the text-align property. Use of text-align can easily make tables more readable, lining up columns to the left, right, or center as appropriate. Because | cells are center-aligned and | cells are left-aligned, columns can look a bit disorganized; text-align rules can correct this. For example, if you have a table listing movie show dates, you'd want to align the columns to the right, so that the times line up.
A sample style sheet using text-align is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex08 Listing 17.8].
Listing 17.8. Setting the Horizontal Alignment of Table Cells
/* schedule-17.8.css */<br /><br />table { table-layout: auto; width: 90%;<br />border-collapse: separate; border-spacing: 0.25em;<br />empty-cells: hide; font-size: small;<br />margin-left: auto; margin-right: auto; }<br />td, th { width: 15%; }<br />th { border: 2px solid black; }<br />td { border: 2px solid gray; }<br />caption { caption-side: top; text-align: left;<br />font-size: x-large; font-style: italic; }<br /><br />tbody th { text-align: right; }<br />tbody td { text-align: center; }<br />
|
Applying this style sheet to the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch17lev1sec1.html#ch17ex01 Listing 17.1] gives the effects shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig08 Figure 17.8]. For this screenshot, I've decreased the font size so that you can see the text alignment effects easily in each cell.
Figure 17.8. Aligning cells horizontally. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/17fig08_alt.jpg [View full size image]] File:17fig08.jpg
Vertical Alignment
The vertical-align property in CSS is the equivalent of the HTML valign property; browsers often align table cells to the vertical middle, and this can make cell contents look clumsy if the text wraps. Most of the time you are going to want to align data cells vertically so that the first line of each row is lined up on the top. Column header cells may look better aligned along the bottom. You can use the vertical-align property to affect these styles.
By the Way
The vertical-align property was introduced in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15], "Alignment."
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17ex09 Listing 17.9] is a style sheet that aligns the content of each | cell with the bottom of that cellsee Tuesday evening for an example. It also vertically centers each | cell with the middle value for vertical-align.
Listing 17.9. Setting the Vertical Alignment of Table Cells
/* schedule-17.9.css */<br />table { table-layout: auto; width: 90%;<br />border-collapse: separate; border-spacing: 0.25em;<br />empty-cells: hide; font-size: medium;<br />margin-left: auto; margin-right: auto; }<br />td, th { width: 15%; }<br />th { border: 2px solid black; }<br />td { border: 2px solid gray; }<br />tbody th { text-align: right; }<br />tbody td { text-align: center; }<br />caption { caption-side: top; text-align: right;<br />font-size: x-large; font-style: italic; }<br />td { vertical-align: bottom; }<br />th { vertical-align: middle; }<br />
|
The results of this style sheet, when applied to the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch17lev1sec1.html#ch17ex01 Listing 17.1], are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17fig09 Figure 17.9].
Figure 17.9. Aligning cells vertically.
File:17fig09.jpg
| Try it Yourself: Further Styles for Your Calendar
You can add to your calendar additional styles based on what you've learned this hour.
1.
|
Add <col> and <colgroup> elements to your HTML, and a | to title your calendar.
2.
|
Move the | to before or after the calendar table, based on what you think looks best.
3.
|
Set the backgrounds of each day by using column-based selectors.
|
4.
|
Adjust the alignment, colors, and fonts of your table to suit your taste, and now you've got your own calendar!
|
|
./ ADD NAME=CH17LEV1SEC3.HTML
Summary
CSS rules can be used in conjunction with HTML tables to create a pleasing presentation of columnar data or layout tables. CSS browsers conceptualize tables as a series of layers: In order from most specific to least, those are the table cells, the table rows, the groups of table rows, the table columns, the groups of table columns, and the table itself. Inheritance follows these layers, as can be seen in background property effects.
Nearly any CSS property can be applied to table elements, although table cells don't have margins. Borders are of special importance when dealing with tables, and CSS offers two models for displaying tables: collapsed and separated. Both are set via the border-collapse property.
Table cells in the collapsed border model share a common border, whereas in the separated border model, a distance defined by the border-spacing property separates all cells from each other. In both models, the empty-cells property defines whether or not borders around empty table cells are displayed.
The caption, a label for the content of the table, can be located on any side of the table and styled separately. Rules can also be set by column rather than by row or cell if you use the <col> and <colgroup> tags, although the types of properties available for column styling are limited. You can improve the appearance and usability of a table by adjusting the text-align and vertical-align properties of the cells.
./ ADD NAME=CH17LEV1SEC4.HTML
Workshop
The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa1q1a1 Q.]
|
When would I ever want to change the display property value of a tag to a different type of table element?
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa1q1 A.]
|
When using HTML, you pretty much don't ever want to do that. The browsers all understand what the default display values for each table element are supposed to be, and they often ignore attempts to change those values. The table-related display values are intended for use with XML, which doesn't have specific tags that are shown as tables. Using the display property, you can make XML elements show up as tables with rows, columns, and cells.
|
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa2q1a1 1.]
|
All the following rules apply to a certain cell in a table. What color will the background of that cell be?
tbody { background-color: green; }<br />table { background-color: blue; }<br />tr { background-color: transparent; }<br />col { background-color: yellow; }<br />
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa2q2a2 2.]
|
You want to set the spacing between table cells to 10 pixels in both the horizontal and vertical directions. Which of the following CSS rules accomplishes that?
# table { cell-spacing: 10px; table-layout: separate; }
table { cell-spacing: 10px; border-collapse: collapse; } table { border-spacing: 10px; border-collapse: separate; } table { cell-spacing: 10px; border-collapse: separate; }
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa2q3a3 3.]
|
How would you write a rule to make the caption appear after the table in a smaller, italic font with a thin black border around it?
|
Answers
, <tbody>, <col>, and
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa2q1 1.]
|
The background color will be green. In order from most specific to least specific, the selectors are | |
. Because the background color of the table row is transparent, the next selector's background-color shows through, and that is the green of the <tbody>.
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa2q2 2.]
|
The correct answer is (c). There is no cell-spacing property; the correct name is border-spacing.
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch17qa2q3 3.]
|
Here is one such rule:
caption { caption-side: bottom;<br />font-size: smaller;<br />font-style: italic; <br />border: thin solid black; }<br />
|
Exercise
Tables are all around us, and not just for page layout. Any time in which you're building a grid that conveys information based on position in that grid, you're dealing with a table.
Write up some tables based on what you encounter around youa bus schedule, a campus phone and office directory, columns of weights and measures, accounting records, or whatever else strikes your fancy.
Use the HTML tags and style rules presented in this hour to create data tables. Get creativehow can you best present this tabular data in a clear, straightforward manner where the styles enhance the tables?
./ ADD NAME=CH18.HTML
|
|---|
| |
