XHTML and CSS - Styling Tables
Styling Tables
In this tutorial we're going to be styling some XHTML tables with CSS, first to do this we need a table, so let's create a table with some random data in it.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <table> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> </table> </body> </html>
The first thing we're going to do to this table is add a border to the overall table, to do this select your table element and add a nice blue border.
<html> <head> <title> This is the title. </title> <style type="text/css"> table { border-width: 3px; border-style: solid; border-color: blue; } </style> </head> <body> <table> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> </table> </body> </html>
When you view that you'll see that we now have a border around our entire table but it's not that easy to view our table data individually so we'll fix that by making the background color of our table rows yellow, so select tr and make the background color yellow.
<html> <head> <title> This is the title. </title> <style type="text/css"> table { border-width: 3px; border-style: solid; border-color: blue; } tr { background-color: yellow; } </style> </head> <body> <table> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> </table> </body> </html>
Next we'll add a border to our table data by selecting our td element and adding a 2 pixel wide red dashed border.
<html> <head> <title> This is the title. </title> <style type="text/css"> table { border-width: 3px; border-style: solid; border-color: blue; } tr { background-color: yellow; } td { border-width: 2px; border-style: dashed; border-color: red; } </style> </head> <body> <table> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> <tr> <td>Table data 1</td> <td>Table data 2</td> <td>Table data 3</td> </tr> </table> </body> </html>
Now when you view your table you'll see that even though we have a style applied to each individual piece of data and also a style applied to each row that whenever you apply a style to the individual pieces to data that it doesn't overwrite the table row. What I mean by that is that whenever you make your table row yellow and then you make your table data have a border it doesn't replace the table row, everything gets inherited down.

Page generated in 0.0053 seconds.