HTML `<table>`

Baseline *

20157

<table> HTML

<table>
  <caption>
     2021
  </caption>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML </td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td></td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript </td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td></td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2"></th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

align: leftcenterright CSS margin-inline-start margin-inline-end
bgcolor: HTML 6 16 RGB # CSS <color> CSS background-color
border: 0 frame CSS border
cellpadding: CSS padding <th> <td>
cellspacing: 2 CSS border-spacing <table> <table> border-collapse collapse
frame: voidabovebelowhsidesvsideslhsrhsboxborder border-style border-width
rules: nonegroups rowscolsall <table> CSS border
summary: <caption>
width: CSS width

: HTML height <table> height CSS min-height

<table> <table>

1
1
dir 1
1

[]

<caption>

scope <th> scope

colspan rowspan

id headers <th>

<table> HTML

HTML CSS

HTML

HTML 2

2 3 CSS

HTML

<tr> 1 <td> <th> <th> <td>2 2

html

<table>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

CSS

HTML

4 <tr> 4 1 <th> <th> 3 <td> <tbody>

html

<table>
  <tr>
    <th></th>
    <th>ID</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">2010/06/03</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">2011/01/13</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">2012/07/23</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

CSS CSS <th> <td>

css

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

<th> <td>

HTML

scope <th> col row

html

<table>
  <tr>
    <th scope="col"></th>
    <th scope="col">ID</th>
    <th scope="col"></th>
    <th scope="col"></th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">2010/06/03</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">2011/01/13</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">2012/07/23</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

: headers <th> <td>

HTML

<tr> <thead> <tbody> <tbody>

html

<table>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">ID</th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010/06/03</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011/01/13</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012/07/23</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

CSS CSS

HTML

<td> <tr> <thead>

2 colspan rowspan <th>

html

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2"></th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2"></th>
      <th scope="col" rowspan="2"></th>
    </tr>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010/06/03</time></td>
      <td></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011/01/13</time></td>
      <td><time datetime="2017-04-08">2017/04/08</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012/07/23</time></td>
      <td></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

2 1 <th> ID2

ID rowspan 2
1 colspan 2 2
2 2 3 2 1 2

HTML

<caption> <table>

<tfoot>

html

<table>
  <caption>
    2021 
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2"></th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2"></th>
      <th scope="col" rowspan="2"></th>
    </tr>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010/06/03</time></td>
      <td></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011/01/13</time></td>
      <td><time datetime="2017-04-08">2017/04/08</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012/07/23</time></td>
      <td></td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4"></th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

background-color HTML CSS

<table>
  <caption>
    2021 
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2"></th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2"></th>
      <th scope="col" rowspan="2"></th>
    </tr>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010/06/03</time></td>
      <td></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011/01/13</time></td>
      <td><time datetime="2017-04-08">2017/04/08</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012/07/23</time></td>
      <td></td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4"></th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

CSS

font <table> 2 <thead> <tfoot> <tr> background-color

css

table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

HTML HTML

<table>
  <caption>
    2021 
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2"></th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2"></th>
      <th scope="col" rowspan="2"></th>
    </tr>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010/06/03</time></td>
      <td></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011/01/13</time></td>
      <td><time datetime="2017-04-08">2017/04/08</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012/07/23</time></td>
      <td></td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4"></th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

CSS

border-collapse border-spacing 1 bottom caption-side (<caption>)

css

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

padding vertical-align bottom 2

css

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

CSS background-color <thead> <tr> 2 :nth-of-type 2 border-bottom 2 2 2

css

thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

2 :last-of-type 2

css

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

CSS text-align background-color

css

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

background-color

css

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

<td> text-align right

css

tbody > tr > td:last-of-type {
  text-align: right;
}

css

tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

CDN

HTML CSS

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> :</th>
      <th>2<sup>3</sup> :</th>
      <th>3<sup>3</sup> :</th>
      <th>4<sup>3</sup> :</th>
      <th>5<sup>3</sup> :</th>
      <th>6<sup>3</sup> :</th>
      <th>7<sup>3</sup> :</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 1: 1</td>
      <td> 1: 8</td>
      <td> 1: 27</td>
      <td> 1: 64</td>
      <td> 1: 125</td>
      <td> 1: 216</td>
      <td> 1: 343</td>
    </tr>
    <tr>
      <td> 2: 1</td>
      <td> 2: 8</td>
      <td> 2: 27</td>
      <td> 2: 64</td>
      <td> 2: 125</td>
      <td> 2: 216</td>
      <td> 2: 343</td>
    </tr>
    <tr>
      <td> 3: 1</td>
      <td> 3: 8</td>
      <td> 3: 27</td>
      <td> 3: 64</td>
      <td> 3: 125</td>
      <td> 3: 216</td>
      <td> 3: 343</td>
    </tr>
    <tr>
      <td> 4: 1</td>
      <td> 4: 8</td>
      <td> 4: 27</td>
      <td> 4: 64</td>
      <td> 4: 125</td>
      <td> 4: 216</td>
      <td> 4: 343</td>
    </tr>
    <tr>
      <td> 5: 1</td>
      <td> 5: 8</td>
      <td> 5: 27</td>
      <td> 5: 64</td>
      <td> 5: 125</td>
      <td> 5: 216</td>
      <td> 5: 343</td>
    </tr>
    <tr>
      <td> 6: 1</td>
      <td> 6: 8</td>
      <td> 6: 27</td>
      <td> 6: 64</td>
      <td> 6: 125</td>
      <td> 6: 216</td>
      <td> 6: 343</td>
    </tr>
    <tr>
      <td> 7: 1</td>
      <td> 7: 8</td>
      <td> 7: 27</td>
      <td> 7: 64</td>
      <td> 7: 125</td>
      <td> 7: 216</td>
      <td> 7: 343</td>
    </tr>
    <tr>
      <td> 8: 1</td>
      <td> 8: 8</td>
      <td> 8: 27</td>
      <td> 8: 64</td>
      <td> 8: 125</td>
      <td> 8: 216</td>
      <td> 8: 343</td>
    </tr>
    <tr>
      <td> 9: 1</td>
      <td> 9: 8</td>
      <td> 9: 27</td>
      <td> 9: 64</td>
      <td> 9: 125</td>
      <td> 9: 216</td>
      <td> 9: 343</td>
    </tr>
    <tr>
      <td> 10: 1</td>
      <td> 10: 8</td>
      <td> 10: 27</td>
      <td> 10: 64</td>
      <td> 10: 125</td>
      <td> 10: 216</td>
      <td> 10: 343</td>
    </tr>
    <tr>
      <td> 11: 1</td>
      <td> 11: 8</td>
      <td> 11: 27</td>
      <td> 11: 64</td>
      <td> 11: 125</td>
      <td> 11: 216</td>
      <td> 11: 343</td>
    </tr>
    <tr>
      <td> 12: 1</td>
      <td> 12: 8</td>
      <td> 12: 27</td>
      <td> 12: 64</td>
      <td> 12: 125</td>
      <td> 12: 216</td>
      <td> 12: 343</td>
    </tr>
    <tr>
      <td> 13: 1</td>
      <td> 13: 8</td>
      <td> 13: 27</td>
      <td> 13: 64</td>
      <td> 13: 125</td>
      <td> 13: 216</td>
      <td> 13: 343</td>
    </tr>
    <tr>
      <td> 14: 1</td>
      <td> 14: 8</td>
      <td> 14: 27</td>
      <td> 14: 64</td>
      <td> 14: 125</td>
      <td> 14: 216</td>
      <td> 14: 343</td>
    </tr>
    <tr>
      <td> 15: 1</td>
      <td> 15: 8</td>
      <td> 15: 27</td>
      <td> 15: 64</td>
      <td> 15: 125</td>
      <td> 15: 216</td>
      <td> 15: 343</td>
    </tr>
    <tr>
      <td> 16: 1</td>
      <td> 16: 8</td>
      <td> 16: 27</td>
      <td> 16: 64</td>
      <td> 16: 125</td>
      <td> 16: 216</td>
      <td> 16: 343</td>
    </tr>
    <tr>
      <td> 17: 1</td>
      <td> 17: 8</td>
      <td> 17: 27</td>
      <td> 17: 64</td>
      <td> 17: 125</td>
      <td> 17: 216</td>
      <td> 17: 343</td>
    </tr>
    <tr>
      <td> 18: 1</td>
      <td> 18: 8</td>
      <td> 18: 27</td>
      <td> 18: 64</td>
      <td> 18: 125</td>
      <td> 18: 216</td>
      <td> 18: 343</td>
    </tr>
    <tr>
      <td> 19: 1</td>
      <td> 19: 8</td>
      <td> 19: 27</td>
      <td> 19: 64</td>
      <td> 19: 125</td>
      <td> 19: 216</td>
      <td> 19: 343</td>
    </tr>
    <tr>
      <td> 20: 1</td>
      <td> 20: 8</td>
      <td> 20: 27</td>
      <td> 20: 64</td>
      <td> 20: 125</td>
      <td> 20: 216</td>
      <td> 20: 343</td>
    </tr>
  </tbody>
</table>

CSS

display block <tbody> white-space nowrap<thead>

position <th> border-collapse collapse

<table> overflow auto

css

table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: white;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}


	1 `<caption>` 0 `<colgroup>` 1 `<thead>` 2 1 : 0 `<tbody>` 1 `<tr>` 1 `<tfoot>`


ARIA	`table`
ARIA
DOM	`HTMLTableElement`


HTML # the-table-element

: HTML
<caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>:
background-color: CSS
border, border-collapse, border-spacing: CSS
margin, padding: CSS
text-align: CSS
vertical-align: CSS
width: CSS

MDN

MDN 202667

GitHub