table
element represents data with more than one dimension, in the form of a
table.
table
element represents data with more than one dimension, in the form of a
table.
tbody
tbody
elements
colspan
must "not extend past the end of its row
group established by a tbody
element"
tfoot
tbody
thead
thead
element represents the block of rows that consist of the
column labels
(headers) for the parent table
element
tr
tr
element represents a row of cells in a table.
td
td
element represents a data cell in a table.
th
th
element represents a header cell in a table.th
element may have a scope
content attribute
specifiedcolgroup
span
attribute or col
colgroup
element must not appear inside the thead
elementcolgroup
element must appear before thead
and after
the caption
element,
if there is one
colgroup
elementsborder
, background
, width
and
visibility
may be applied to
col
and colgroup
elements
color
, for example, cannot be changedcolgroup
element contains no col
elements,
then the element may have a span
content attribute specified,
whose value must be a valid non-negative integer greater than zero.
col
col
element is a void element and enclosing colgroup
must not have a span attribute
col
may take span attribute col
has no end tag and must be a child of colgroup
which has
no span
attribute
col
element may have a span
content attribute
specified,
whose value must be a valid non-negative integer greater than zero.
rowspan colspan
td
and th
elements may have a colspan
content attribute specified
td
and th
elements may have a rowspan
content attribute specified
vertical-align
top
middle
bottom
text-align
left
center
right
table-layout
cells
, rows
, and columns
table-layout:fixed
for faster rendering of tablesborder-collapse
collapse
separate
table border
border:none
border:0
border:0
sets the value
of border-width
to zero.
border=1
as attribute to table tag
(deprecated)
border-spacing
length
valueslength
value is specified,
it defines both the horizontal and vertical spacings between cells.
length
values are specified, the first value defines the
horizontal spacing between cells
(i.e., the space between cells in adjacent columns),
and the second value defines the vertical spacing between cells
(i.e., the space between cells in adjacent rows).
First of two: left and rightis the opposite of what happens with
Last of two: top and bottom
border
(see example below)
border-collapse
is separate
caption
caption
element represents the title of the table
that is its parent,
if it has a parent and that is a table
element
caption
, if present, must be be a
first-child
of the table
element
caption-side
top
bottom
margin: 0 auto
hide
show
caption
elementcolgroup
elementsthead
elementtbody
elementstr
elementstfoot
element<table> <caption>caption</caption> <tr> <th>head</th> </tr> <tr> <td>data</td> </tr> </table>
table, th, td { border: 1px solid green; }
head |
---|
data |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; }
h | h | h |
---|---|---|
d | d | d |
f | f | f |
<table> <caption>caption</caption> <thead> <tr> <th colspan="3">h</th> </tr> </thead> <tbody> <tr> <td colspan="2">d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; }
h | ||
---|---|---|
d | d | |
f |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td rowspan="2">d</td> <td>d</td> <td>d</td> </tr> <tr> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; }
h | h | h |
---|---|---|
d | d | d |
d | d | |
f | f | f |
<table></table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } table { caption-side:bottom; }
h | h |
---|---|
d | d |
f | f |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } table { border-collapse:collapse; }
h | h |
---|---|
d | d |
f | f |
<table> <caption>caption</caption> <colgroup span="2"></colgroup> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } colgroup { background-color:orange; }
h | h | h |
---|---|---|
d | d | d |
d | d | d |
f | f | f |
<table> <caption>caption</caption> <colgroup> <col> <col span="2"> </colgroup> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } col:first-of-type{ background-color:orange; } col:nth-of-type(2){ background-color:yellow; }
h | h | h |
---|---|---|
d | d | d |
d | d | d |
f | f | f |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> <tr> <td>d</td> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </table>
table, th, td { border: 1px solid green; empty-cells: hide; }
h | h | h |
---|---|---|
d | d | d |
d | ||
f | f | f |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } tbody td { height: 3em; } tbody td:first-of-type { vertical-align:top; } tbody td:nth-of-type(2) { vertical-align:middle; } tbody td:nth-of-type(3) { vertical-align: bottom; }
h | h | h |
---|---|---|
d | d | d |
f | f | f |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } tbody td { width: 3em; } tbody td:first-of-type { text-align:left } tbody td:nth-of-type(2) { text-align:center; } tbody td:nth-of-type(3) { text-align:right; }
h | h | h |
---|---|---|
d | d | d |
f | f | f |
<table> <caption>caption</caption> <thead> <tr> <th>h</th> <th>h</th> <th>h</th> </tr> </thead> <tbody> <tr> <td>d</td> <td>d</td> <td>d</td> </tr> </tbody> <tfoot> <tr> <td>f</td> <td>f</td> <td>f</td> </tr> </tfoot> </table>
table, th, td { border: 1px solid green; } table { border-spacing: 5px 2rem; }
h | h | h |
---|---|---|
d | d | d |
f | f | f |
border
and border-spacing
behave in a diametrically opposed fashion! The first value refers to top-and-bottom
with border
, but refers to left-and-right
with
border-spacing
h1 | h2 |
---|---|
d1 | d2 |
#tableThirteen, #tableThirteen td, #tableThirteen th { border-style: solid; border-width: 0.1em 1em; border-color: blue; }
h1 | h2 |
---|---|
d1 | d2 |
#tableFourteen, #tableFourteen th, #tableFourteen td { border: 1px solid green; border-spacing: 1px 10px; }