HTML and CSS Reference
In-Depth Information
Getting better already! But nothing we've done so far is table specific. We've simply styled
some type and added some borders, just as we can do on any element with CSS.
Table Borders
CSS defines two separate models for table borders: collapsed and separate. The default ren-
dering mode for most browsers is the separate model, in which borders around cells are kept
separate from one another. For example, adding a one-pixel border to our example table
in separate mode produces the results shown in Figure 10-5.
Figure 10-5. Table borders in the separate model
You'll note there is some space between each cell, and each cell receives its own, noncon-
necting border. Let's change the border model to collapsing before we add our border, like so:
table {
width: 90%;
margin: 0 auto;
font-family: Lucida Grande, Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
line-height: 1.4em;
border-collapse: collapse;
th {
text-align: left;
border-bottom: 1px solid #000;
td {
color: #333;
border: 1px solid #ccc;
Search WWH ::

Custom Search