BOOK Studio947
狩野祐東・狩野さやか著書

STUDIO947

コラム

詳しくわかるテーブル（1）

<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行	1A	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>