| |
There are two distinct models for setting borders on table cells in CSS. One
is most suitable for so-called separated borders around individual cells,
the other is suitable for borders that are continuous from one end of the table
to the other. Many border styles can be achieved with either model, so it is
often a matter of taste which one is used.
The lengths specify the distance that separates adjacent cell borders. If one
length is specified, it gives both the horizontal and vertical spacing. If two
are specified, the first gives the horizontal spacing and the second the
vertical spacing. Lengths may not be negative.
In this model, each cell has an individual border. The 'border-spacing' property specifies the
distance between the borders of adjacent cells. This space is filled with the
background of the table element. Rows, columns, row groups, and column groups
cannot have borders
(i.e., user agents must ignore
the border properties for those elements).
Example(s):
A table with 'border-spacing' set to a length value.
Note that each cell has its own border, and the table has a separate border as
well.
Basic Table
<TABLE style=" border: outset 10pt red;
border-collapse: separate;">
<COLGROUP span=2>
<COLGROUP style="background-color:lightblue">
<TR>
<TD style="border: inset 10pt blue">01 notes
</TD><TD style="background-color:thistle"
onMouseover="this.style.backgroundColor='teal';"
onMouseout="this.style.backgroundColor='tan';">
Visit here<BR> </TD>
</TD><TD style="border: inset 5pt green">02
</TD></TR><TR>
<TD style="border: inset 5pt green">04</TD>
<TD style="border: inset 5pt green"> 05</TD>
<TD style="border: inset 5pt green">06 words
</TD></TR></TABLE>
border-spacing: 15pt; added
- 'empty-cells'
-
| Value:
| show | hide | inherit
|
| Initial:
| show
|
| Applies to:
| 'table-cell' elements
|
| Inherited:
| yes
|
| Percentages:
| N/A
|
| Media:
| visual
|
In the separated borders model, this property controls the rendering of
borders around cells that have no visible content. Empty cells and cells with
the 'visibility' property set to 'hidden' are
considered to have no visible content. Visible content includes " " and
other whitespace except ASCII CR ("\0D"), LF ("\0A"), tab ("\09"), and space
("\20").
When this property has the value 'show', borders are drawn around empty cells
(like normal cells).
A value of 'hide' means that no borders are drawn around empty cells.
Furthermore, if all the cells in a row have a value of 'hide' and have no
visible content, the entire row behaves as if it had 'display: none'.
Example(s):
The following rule causes borders to be drawn around all cells: TABLE { empty-cells: show }
| |
border-collapse: separate;
| 01 notes |
Visit here
|
03 |
| 04 |
05 |
06 words |
border-spacing: 15pt
| 01 notes |
Visit here
|
03 |
| 04 |
05 |
06 words |
border-spacing: 5pt 15pt
| 01 notes |
Visit here
|
03 |
| 04 |
05 |
06 words |
empty-cells:show;
| 01 notes |
Visit here
|
|
| 04 |
05 |
06 words |
empty-cells:hide;
| 01 notes |
Visit here
|
|
| 04 |
05 |
06 words |
|
|