Embed Size (px)
Citation preview
Table Styling
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 <style> section of the document.
Common Table Styles:Style Description
width Width of table or row.
background-color Background color of table, row or cell.
color Color of text in table, row, or cell.
text-align Text alignment in table, row or cell.
border Border of table, row, or cell.
padding Padding 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 <p>, <h1>,
<li>, and <a>.
More About Borders:Style Description
border-width Width 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-color Color of border around table, row, or cell.
border-style Type of border to display: solid, dashed, dotted, groove, ridge, inset, outset.
border-collapse Collapses 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.
Example Border:<head> <style type="text/css"> table { width:200px; border-width:3px; border-color:red; border-style:solid dashed dotted; } </style></head><body> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> </tr></table></body>
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 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.
Using the Border Shorthand Property:<head> <style type="text/css"> table { width:200px; border:3px dashed red; } </style></head><body> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> </tr></table></body>
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 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.
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).
Using Classes to Style Tables:<head> <style type="text/css"> table { width:200px; border:3px solid black; } tr.odd { background-color:yellow; } tr.even { background-color:lightblue; } </style></head><body> <table> <tr class="odd"> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr class="even"> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr class="odd"> <td>Cell 5</td> <td>Cell 6</td> </tr></table></body>
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
By alternating the classes "odd" and "even", we have made it easier for our web visitors to read the table
rows.
![Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSConfUS2014]](https://img.dokumen.tips/doc/110x75/547b1d22b37959492b8b4c73/sara-soueidan-styling-and-animating-scalable-vector-graphics-with-css-cssconfus2014.jpg)
