4.3 table styling


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

4.3 table styling

  1. 1. Table Styling
  2. 2. Using CSS to Style Tables: <ul><li>So far, our table styling - such has &quot;width&quot; and &quot;border&quot; - has not used CSS. </li></ul><ul><li>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. </li></ul>
  3. 3. Common Table Styles: 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>. Text alignment in table, row or cell. text-align Border of table, row, or cell. border Padding of table, row, or cell. padding 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.
  4. 4. More About Borders: <ul><li>The border-style and border-color properties can be defined for specific sides: </li></ul><ul><ul><li>Specifying 1 value = style applies to all four sides. </li></ul></ul><ul><ul><li>Specifying 2 values = first applies to top and bottom, second applies to left and right. </li></ul></ul><ul><ul><li>Specifying 3 values = first applies to top, second applies to right and left, third applies to bottom. </li></ul></ul><ul><ul><li>Specifying 4 values = applies to top, right, bottom, left respectively. </li></ul></ul>Collapses double lines around cells into one line. border-collapse 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 &quot;0&quot; 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.
  5. 5. Example Border: <ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>table { </li></ul><ul><li>width:200px; </li></ul><ul><li>border-width:3px; </li></ul><ul><li>border-color:red; </li></ul><ul><li>border-style:solid dashed dotted; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 1</td> </li></ul><ul><li><td>Cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 3</td> </li></ul><ul><li><td>Cell 4</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 5</td> </li></ul><ul><li><td>Cell 6</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul>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. Cell 4 Cell 3 Cell 6 Cell 5 Cell 2 Cell 1
  6. 6. Using the Border Shorthand Property: <ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>table { </li></ul><ul><li>width:200px; </li></ul><ul><li>border:3px dashed red; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 1</td> </li></ul><ul><li><td>Cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 3</td> </li></ul><ul><li><td>Cell 4</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 5</td> </li></ul><ul><li><td>Cell 6</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul>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. Cell 4 Cell 3 Cell 6 Cell 5 Cell 2 Cell 1
  7. 7. Using CSS Classes to Style Tables: <ul><li>The power of CSS classes can be used when styling tables. </li></ul><ul><li>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). </li></ul>
  8. 8. Using Classes to Style Tables: <ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>table { </li></ul><ul><li>width:200px; </li></ul><ul><li>border:3px solid black; </li></ul><ul><li>} </li></ul><ul><li>tr.odd { </li></ul><ul><li>background-color:yellow; </li></ul><ul><li>} </li></ul><ul><li>tr.even { </li></ul><ul><li>background-color:lightblue; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><table> </li></ul><ul><li><tr class=&quot;odd&quot; > </li></ul><ul><li><td>Cell 1</td> </li></ul><ul><li><td>Cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr class=&quot;even&quot; > </li></ul><ul><li><td>Cell 3</td> </li></ul><ul><li><td>Cell 4</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr class=&quot;odd&quot; > </li></ul><ul><li><td>Cell 5</td> </li></ul><ul><li><td>Cell 6</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul>By alternating the classes &quot;odd&quot; and &quot;even&quot;, we have made it easier for our web visitors to read the table rows. Cell 4 Cell 3 Cell 6 Cell 5 Cell 2 Cell 1