|
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
Copyright © 2013 1keydata.com All Rights Reserved Privacy Policy
|