Tables/CSS

Tables styled with CSS rules are much more efficient, if done well, than the old method. These tables are forward looking in the use of CSS but also degrade with a bit of grace for older browsers (NS4). Using CSS styled tables will expand the look of your layout. There are many more things that you can do to tables than we show here, but this will give you a basic idea of what you can do. If you find yourself using a table style repeatedly that is not represented here, or would like to know how to accomplish a certain look, let us know and we can show you how to do it.

The sample below illustrates the use of "inline" CSS. For demonstration purposes, we have tried to include several examples in one table, but the styles can be applied easily to any table or td tag.

bottom

middle

Top

default

<table align="center" width="100%" cellspacing="10" cellpadding="10" style="background-image: url(img/back_1.gif); border: 1px solid #000000; height: 200px;">
  <tr>
    <td style="text-align: left; background-image: url(img/back_2.gif); border-left: 6px solid #000000; border-top: 2px solid #ff6600; vertical-align: bottom; width: 20%;">bottom</td>
    <td style="text-align: center; background-color: #ecf0da; border-top: 6px dotted #ff6600; border-bottom: 6px dashed #ff6600; vertical-align: middle; width: 30%;">middle</td>
    <td style="text-align: right; background-color: #d5d69a; background-image: url(img/top_border.jpg); background-position: top; background-repeat: no-repeat; border: 6px double #3a2a3e; vertical-align: top; width: 30%;">Top</td>
    <td style="background-color: #ecf0da; border: 18px ridge #919326; width: 20%;">default</td>
  </tr>
</table>

By using inline CSS when creating your code, you can achieve many effects that otherwise could not be done with HTML alone.

To Top TO TOP