1 / 8

Table Styling

Learn how to style tables using CSS, including adding borders and background colors to make your tables more visually appealing. Alter the appearance of specific rows using CSS classes.

genevievejensen
Download Presentation

Table Styling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <style> section of the document.

  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>.

  4. More About Borders: • 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: <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> 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: <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> 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: <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> By alternating the classes "odd" and "even", we have made it easier for our web visitors to read the table rows.

More Related