CSS Table

In HTML code, you will commonly see the table tag followed by border, cellpadding, and cellspacing attributes. This would be unnecessary if we use CSS.

The table, th, tr, and td selectors can use many of the properties we have defined previously in this tutorial such as, but not limited to, those for text, font, border, color, and background.

Let's take a look at one example. Assuming that we want the following style applied to the table:

Table: No outer border, font is arial, font size is 14px.

Heading: Background is yellow.

Element: There is a black solid line beneath every element in the table.

For scores below 60, create a separate class that would make the font color red.We would apply the following stylesheet:

table {   border: 0;   font-family: arial;   font-size:14px; } th {   background-color:yellow; } td {   border-bottom:1 solid #000000; } .fail {   color:#FF0000; }

Given this style, the HTML code below:

<table> <tr> <th>Student Name</th> <th>Score</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class="fail">55</td> </tr> </table>

would render the following:

Student Name	Score
Stella	85
Sophie	95
Alice	55

border-collapse

There is one property related to a table that we want to mention here, and that is the border-collapse property. Theborder-collapse property essentially replaces the cellspacing=0 declaration. Let's looks at the example below:
With this CSS declaration,

table {   border:0;   border-collpase:collpase;   width:200px; } tr {   border-bottom:1px solid #000; }

the HTML code below,

<table> <tr><td>Year</td><td>Income</td></tr> <tr><td>2006</td><td>35.2M</td></tr> <tr><td>2007</td><td>40.1M</td></tr> </table>

would render the following:

Year	Income
2006	35.2M
2007	40.1M

Notice that the underline between the Year column and the Income column are continuous. The is the effect ofborder-collapse:collapse.

Dont Miss Another Post Connect With Us ! Enter your email address:

Tweet

Posted in: CSS Tutorial