CSS And Tables

No Legs

If you use tables in your html, you probably know that tables come out looking pretty awful.

The default settings really  suck.

To instantly improve the look of tables, you can eliminate the double outline that comes with bog-standard settings. Dump excess lines and give a sleek contemporary look to all your tables with a simple CSS property. Its called border-collapse.

Add the following to your CSS style sheet for instant improvement.

< style type="text/css">
table { border-collapse:collapse; }

You can also add...

table, td, th { border:1px solid black; font-family:tahoma, sans-serif; font-size:95%; }
.title { background:#ccc; text-align:center; color:#000; font-weight:bold; }
.sub  { background:#ccc; text-align:center; color:#000; font-weight:bold; }
</style>

Add the following to <td>

<tr>
  <td class="title" width="33%">Height</td>
  <td class="title" width="33%">Male</td>
  <td class="title" width="33%">Female</td>
</tr>
<tr>
  <td class="sub">ft in</td>
  <td class="sub">lbs</td>
  <td class="sub">lbs</td>
</tr>

Here's what the table looks like without CSS:



















Awful.

Here's what the table looks like with CSS:



















Much better.

Done!