BOOKS
by Sukeharu Kano / 狩野祐東 著書

詳しくわかるテーブル(1)

2013-05-17

<td>タグ、<th>タグで作られるテーブルのセルは、列(横)方向、行(縦)方向に結合することができます。

スラスラわかるHTML&CSSのきほん』p.101〜106

colspan属性

 テーブルを列方向に結合するには、結合する先頭の<td>もしくは<th>にcolspan属性を追加します。colspan属性の値は、結合するセルの合計数にします。さらに、結合されるセルを形成していた<td>もしくは<th>はソースから除きます。次の例では2行A列とB列が結合しています。

  A列 B列 C列
1行 1A 1B 1C
2行 2A 2C
3行 3A 3B 3C
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>table colspan rowspan</title>
<style>
table {
    border-collapse: collapse;
}
th, td {
    margin: 0;
    border: 1px solid #cccccc;
    padding: 0.25em 1em;
}
th {
    background-color: #eeeeee;
}
</style>
</head>
<body>
<table>
<tr>
    <th>&nbsp;</th><th>A列</th><th>B列</th><th>C列</th>
</tr>
<tr>
    <th>1行</th><td>1A</td><td>1B</td><td>1C</td>
</tr>
<tr>
    <th>2行</th><td colspan="2">2A</td><td>2C</td>
</tr>
<tr>
    <th>3行</th><td>3A</td><td>3B</td><td>3C</td>
</tr>
</table>
</body>
</html>

rowspan属性

 テーブルを行方向に結合するには、colspan属性の代わりにrowspan属性を追加します。属性値はcolspan属性と同じようにします。結合されるほうのセルを形成していた<td>もしくは<th>をソースから除くのも同じです。次の例では1行A列と2行A列が結合しています。

  A列 B列 C列
1行 1A 1B 1C
2行 2B 2C
3行 3A 3B 3C
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>table colspan rowspan</title>
<style>
table {
    border-collapse: collapse;
}
th, td {
    margin: 0;
    border: 1px solid #cccccc;
    padding: 0.25em 1em;
}
th {
    background-color: #eeeeee;
}
</style>
</head>
<body>
<table>
<tr>
    <th>&nbsp;</th><th>A列</th><th>B列</th><th>C列</th>
</tr>
<tr>
    <th>1行</th><td rowspan="2">1A</td><td>1B</td><td>1C</td>
</tr>
<tr>
    <th>2行</th><td>2B</td><td>2C</td>
</tr>
<tr>
    <th>3行</th><td>3A</td><td>3B</td><td>3C</td>
</tr>
</table>
</body>
</html>

<th>タグにcolspan属性、rowspan属性を使用すると

 <th>タグにcolspan属性、rowspan属性を使用こともできます。

  3つの<th>セルを結合
A列 B列 C列
1行 1A 1B 1C
2行 2A 2B 2C
3行 3A 3B 3C
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>table colspan rowspan</title>
<style>
table {
    border-collapse: collapse;
}
th, td {
    margin: 0;
    border: 1px solid #cccccc;
    padding: 0.25em 1em;
}
th {
    background-color: #eeeeee;
}
</style>
</head>
<body>
<table>
<tr>
    <th rowspan="2">&nbsp;</th><th colspan="3">3つの&lt;th&gt;セルを結合</th>
</tr>
<tr>
    <th>A列</th><th>B列</th><th>C列</th>
</tr>
<tr>
    <th>1行</th><td>1A</td><td>1B</td><td>1C</td>
</tr>
<tr>
    <th>2行</th><td>2A</td><td>2B</td><td>2C</td>
</tr>
<tr>
    <th>3行</th><td>3A</td><td>3B</td><td>3C</td>
</tr>
</table>
</body>
</html>