1. Table Styling

2. Using CSS to Style Tables: So far, our table styling - such has "width" and "border" - has not used CSS. CSS provides us with many tools to style our tables, again with the advantage of being able to make multiple changes to a page with a single edit in the section of the document.

3. Common Table Styles: StyleDescription widthWidth of table or row. background-colorBackground color of table, row or cell. colorColor of text in table, row, or cell. text-alignText alignment in table, row or cell. borderBorder of table, row, or cell. paddingPadding of table, row, or cell. You are already familiar with the first four styles listed here. We have used them for other elements, such as,,, and.

4. More About Borders: StyleDescription border-widthWidth of border around table, row, or cell. Measured in pixels. Also available are: thin, medium, and thick. A value of "0" displays no border. border-colorColor of border around table, row, or cell. border-styleType of border to display: solid, dashed, dotted, groove, ridge, inset, outset. border-collapseCollapses double lines around cells into one line. The border-style and border-color properties can be defined for specific sides: Specifying 1 value = style applies to all four sides. Specifying 2 values = first applies to top and bottom, second applies to left and right. Specifying 3 values = first applies to top, second applies to right and left, third applies to bottom. Specifying 4 values = applies to top, right, bottom, left respectively.

5. Example Border: table { width:200px; border-width:3px; border-color:red; border-style:solid dashed dotted; } Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 1Cell 2 Cell 3Cell 4 Cell 5Cell 6 Here we have defined the width of the table, the thickness of the border, the color of the border, and the style of the border.

6. Using the Border Shorthand Property: table { width:200px; border:3px dashed red; } Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 1Cell 2 Cell 3Cell 4 Cell 5Cell 6 We also have the option to use shorthand when specifying the border properties. The syntax is border:border-width border- style border-color; This shorthand can be used only when the border style and color are uniform for top, left, bottom, and right.

7. Using CSS Classes to Style Tables: The power of CSS classes can be used when styling tables. For example, we can used two different classes to alternate background colors for table rows, making our table easier to read (much like the tables used in earlier slides).

8. Using Classes to Style Tables: table { width:200px; border:3px solid black; } tr.odd { background-color:yellow; } tr.even { background-color:lightblue; } Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 1Cell 2 Cell 3Cell 4 Cell 5Cell 6 By alternating the classes "odd" and "even", we have made it easier for our web visitors to read the table rows.