CSS Primer

Table Borders

A number of border styles are possible. These would include solid, dotted, dashed, double, groove, ridge, inset, outset and none or hidden. { border: or border-style: sets all four border sides. Border-right border-left, border-top, border-bottom may be set individually. { border-style: solid; } { border: inset; }

Borders within borders

Borders can be placed within borders. Two adjoining borders are used.

table.I { position: absolute;
top: 20%;
left: 30%;
border: outset 10px;
border-color: red;
background-color: gray;
height: 100px;
width: 300px; }

td.Ia { border: inset 10px;
border-color: green;
background-color: yellow; }

[table class="I"][tr]
[td class="Ia"]
[table][tr][td][/td][/tr][/table][/td]
[/tr][/table]

The white space in the above table is a space created by default between the two table borders. This can removed or closed up with:

border-collapse: collapse;

or it might be obtained by:

border-collapse: none;

Tables inside Tds

Tables can be put inside table tds. The example below shows a table inside a table td with an image inside the inner table.

table.td { margin-left: auto; margin-right: auto;
position: relative;
top: 3%;
border: outset 10px;
border-color: yellow;
background-color: black;
height: 100px;
width: 300px; }

td.a { height:100px;
width: 30px;
background-color: red; }

td.b { height:100px,
width: 100px;
background-color: orange; }

table.te { border: inset 15px;
border-color: white;
height: 50px;
width: 100px;
text-align: center;
margin-left: 50%; }

td.c { height:100px;
width: 30px;
background-color: green; }

[table class="td"] [tr]
[td class="a"][/td]
[td class="b"]
[table class="te"][tr]
[td][img alt="art" src="court.jpg" height="50" width="50"][/td]
[/tr][/table]
[td class="c"][/td]
[/tr][/table]

CSS (4 of 6) Next Page