<table>
  <caption>ブログの記事用の表です</caption>
  <thead>
  <tr>
    <th>ヘッダーA</th>
    <th>ヘッダーB</th>
    <th>ヘッダーC</th>
  </tr>
  </thead>
  <tfoot>
    <th>フッターA</th>
    <th>フッターB</th>
    <th>フッターC</th>
  </tfoot>
  <tbody>
  <tr>
    <td>ボディA</td>
    <td>ボディB</td>
    <td>ボディC</td>
  </tr>
  <tr>
    <td>ボディA</td>
    <td>ボディB</td>
    <td>ボディC</td>
  </tr>
  <tr>
    <td>ボディA</td>
    <td>ボディB</td>
    <td>ボディC</td>
  </tr>
  </tbody>
</table>
table{
  border-collapse: collapse;
  border: 1px solid #000;
}
thead{
  background-color: gray;
}
tbody{
  background-color: lightblue; 
}
tfoot{
  background-color: lightyellow; 
}
th,td{
  border: 1px solid #000;
  padding: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.