tdタグ表のデータセル

catnose · 2019/10/08 に最終更新

HTMLの<td>ティーディータグは、表（テーブル）のデータセルを表します。

✍️セル：表の1つ1つのマス目のこと
✍️「td」は、Table Data（テーブルデータ）の略です

<table>
  <tr>
    <th>果物</th> <th>味</th>
  </tr>
  <tr>
    <td>いちご</td> <td>甘い</td>
  </tr>
  <tr>
    <td>レモン</td> <td>酸っぱい</td>
  </tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 8px;
  border: 1px solid #333;
}
td {
  background: #EFEFEF;
}

グレーのセルが<td>

👆「いちご」「甘い」「レモン」「酸っぱい」という1つ1つの情報にデータセル（<td>）が使われています。なお、テーブルの見出しとなっている「果物」と「味」には見出しセル（<th>）が使われます。

データセル（td）の使い方

td内に画像などを入れてもOK

テーブルのセルには、<img>、<p>、<ul>、<ol>、<div>、<span>、<code>など、さまざまな要素を入れることができます。

<table>
  <tr>
    <th>作品1</th>
    <td><img src="/learning/demo/images/square.png" alt="壁紙1" width="150" height="150"></td>
  </tr>
  <tr>
    <th>作品2</th>
    <td><span class="fin">公開中</span></td>
  </tr>
</table>

table {
  border-collapse: collapse;
  text-align: center;
}
th, td {
  border: 1px solid #333;
  padding: 5px;
}
.fin {
  text-decoration: line-through;
}

👆このように、セル内に画像を入れたり、<span>を使ってテキストを装飾したりなど、さまざまな表現ができます。

rowspan：セルを縦方向に結合

<td rowspan="つなげるセルの数">○○</td>

<td>にrowspan属性を指定すると、セルの縦方向の大きさが変わり、下のセルと結合します。たとえば、rowspan="2"を指定すると、セル2つ分の大きさになります。

<table>
  <tr>
    <th>果物</th>
    <td>味</td>
  </tr>
  <tr>
    <td>いちご</td>
    <td rowspan="2">甘い</td>
  </tr>
  <tr>
    <td>レモン</td>
    <!-- 🖐ここはセルなし -->
  </tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 10px;
  border: 1px solid #333;
}

👆rowspan="2"を指定した「甘い」のデータセルが、縦2つ分の大きさになっています。縦に大きくなった分、その下のデータセルは書かないようにします。でないと、セルが1つ余り、テーブルからはみ出てしまいます。

<table>
  <tr>
    <th>果物</th>
    <td>味</td>
  </tr>
  <tr>
    <td>いちご</td>
    <td rowspan="3">甘い</td>
  </tr>
  <tr>
    <td>レモン</td>
    <!-- 🖐ここはセルなし -->
  </tr>
  <tr>
    <td>ぶどう</td>
    <!-- 🖐ここはセルなし -->
  </tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 10px;
  border: 1px solid #333;
}

👆rowspan="3"とした場合には、縦3つ分の大きさになるので、「その下」と「さらにその下」のデータセルを書かないようにします。

colspan：セルを横方向に結合

<td colspan="つなげるセルの数">○○</td>

セルを横方向に結合したいときはcolspan属性を使います。たとえばcolspan="3"とすると、そのセルが横3つ分の大きさになります。

<table>
  <tr>
    <th>商品名</th>
    <th>割引</th>
    <th>備考</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td colspan="2">なし</td>
    <!-- 🖐ここはセルなし -->
  </tr>
  <tr>
    <td>商品B</td>
    <td>あり</td>
    <td>壊れやすい</td>
  </tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 10px;
  border: 1px solid #333;
}

👆colspan="2"を指定したデータセルが、横2つ分の大きさになります。大きくなったぶん、その行のセル数は1つ減ります。

tdのabbr属性は廃止

HTML5からは「略語」を表すabbr属性を<td>タグで使用することはできなくなりました。ただし、見出しセル（<th>）では使用できます。
データセル内で「略語」を表したいときは、HTMLタグ<abbr>を使用しましょう。