<table>
<!– 上の見出し –>
<thead> <tr>
<th></th> <!– 左の見出し用の空のセル –>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr> </thead>
<tbody> <!– 左の見出しと内容 –> <tr>
<td>左の見出し1</td>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>左の見出し2</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
<tr>
<td>左の見出し3</td>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
</tr>
</tbody>
</table>
CSS
table {
table-layout: fixed;
border-collapse: collapse;
text-align: center;
border: 2px solid black;
}
td, th {
border: 1px solid black;
}
一つの例ですが、下記のようなコードがあったとするとデフォルトの見栄えはなります。添付画像のようになります。tableタグを使用しなくても、divタグなどで作ることも可能ですが。それぞれの幅の調整やアクセサビリティ（ウェブの情報やサービスがより多くのユーザーにとって利用しやすくすること）的にもメリットがあります。
