<td>

表のデータセル

表の中のデータを入れるセルです。tr の中に並べて使います。

サンプルコード

HTML

1<table>

2 <tr><th>メニュー</th><th>S</th><th>M</th></tr>

3 <tr><td>ブレンド</td><td>¥400</td><td>¥480</td></tr>

4 <tr><td>季節のケーキ</td><td colspan="2">¥520</td></tr>

5</table>

CSS

1table {

2 border-collapse: collapse;

4th, td {

5 padding: 6px 14px;

6 border: 1px solid #ccc;

8td[colspan] {

9 text-align: center;

10}

ブラウザでの表示

td は "table data" の略で、表のデータが入るセルです。テキストのほか、画像やリンクも入れられます。

colspan で横に、rowspan で縦にセルを結合できます。上の例では「季節のケーキ」の価格セルを2列分に広げています。

数値は text-align: right で右揃えにすると、桁がそろって比較しやすくなります。

価格や数量の列は右揃えにすると読みやすくなります。

CSS

1td.num {

2 text-align: right;

3 font-variant-numeric: tabular-nums;