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. The border-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 of border-collapse:collapse.

Next: CSS Position

border-collapse

AdBlock Detected!