7.1 テーブルの基本

[作成] table1.html、table1.css
[フォルダ] webpage/ch07

➢ table1.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table1.css">
		<title>テーブルの基本</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>左上</td>
				<td>右上</td>
			</tr>
			<tr>
				<td>左下</td>
				<td>右下</td>
			</tr>
		</table>
	</body>
</html>

➢ table1.css

@charset "UTF-8";

table {
    border: 1px solid gray;
}

td {
    border: 1px solid gray;
}

7.2 テーブルの詳細設定

1. テーブルの枠線の幅を変更

[修正] table1.css
[フォルダ] webpage/ch07

@charset "UTF-8";

table {
    border: 10px solid gray;
}

td {
    border: 1px solid gray;
}

2. セルの区切り線(間隔)の幅を変更

[修正] table1.css
[フォルダ] webpage/ch07

@charset "UTF-8";

table {
    border: 10px solid gray;
    border-spacing: 10px;
}

td {
    border: 1px solid gray;
}

3. セルの内側の余白を変更

[修正] table1.css
[フォルダ] webpage/ch07

@charset "UTF-8";

table {
    border: 10px solid gray;
    border-spacing: 10px;
}

td {
    border: 1px solid gray;
    padding: 10px;
}

7.3 複数の行や列にまたがるセル

1. 横方向のセルを連結する

[作成] table3_1.html、table3.css
[フォルダ] webpage/ch07

➢ table3_1.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table3.css">
		<title>セルを横に連結する</title>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2">A1 </td>
				<td>A2</td>
			</tr>
			<tr>
				<td>B1</td>
				<td>B2</td>
				<td>B3</td>
			</tr>
		</table>
	</body>
</html>

➢ table3.css

@charset "UTF-8";

table {
    border: 1px solid gray;
}

td {
    border: 1px solid gray;
}

2. 縦方向のセルを連結する

[作成] table3_2.html
[フォルダ] webpage/ch07

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table3.css">
		<title>セルを縦に連結する</title>
	</head>
	<body>
		<table>
			<tr>
				<td rowspan="3">A1</td>
				<td>A2</td>
			</tr>
			<tr>
				<td>B1</td>
			</tr>
			<tr>
				<td>C1</td>
			</tr>
		</table>
	</body>
</html>

7.4 テーブル・セルのサイズを指定する

1. テーブルのサイズをピクセル数で指定する

[作成] table4_1.html、table4_1.css
[フォルダ] webpage/ch07

➢ table4_1.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table4_1.css">
		<title>テーブルのサイズ</title>
	</head>
	<body>
		<table>
			<tr>
				<td>A1</td>
				<td>A2</td>
			</tr>
			<tr>
				<td>B1</td>
				<td>B2</td>
			</tr>
		</table>
	</body>
</html>

➢ table4_1.css

@charset "UTF-8";

table {
    border: 1px solid gray;
    width: 400px;
    height: 100px;
}

td {
    border: 1px solid gray;
}

2. テーブルのサイズを比率指定する

[作成] table4_2.html、table4_2.css
[フォルダ] webpage/ch07

➢ table4_2.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table4_2.css">
		<title>テーブルのサイズ</title>
	</head>
	<body>
		<table>
			<tr>
				<td>A1</td>
				<td>A2</td>
			</tr>
			<tr>
				<td>B1</td>
				<td>B2</td>
			</tr>
		</table>
	</body>
</html>

➢ table4_2.css

@charset "UTF-8";

html,
body {
    height: 100%;
}

table {
    border: 1px solid gray;
    width: 70%;
    height: 80%;
}

td {
    border: 1px solid gray;
}

3. セルのサイズをピクセル数で指定をする

[作成] table4_3.html、table4_3.css
[フォルダ] webpage/ch07

➢ table4_3.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table4_3.css">
		<title>セルのサイズ</title>
	</head>
	<body>
		<table>
			<tr>
				<td>A1</td>
				<td>A2</td>
			</tr>
			<tr>
				<td>B1</td>
				<td>B2</td>
			</tr>
		</table>
	</body>
</html>

➢ table4_3.css

@charset "UTF-8";

table {
    border: 1px solid gray;
}

td {
    border: 1px solid gray;
    width: 200px;
    height: 100px;
}

4. セルのサイズを比率指定する

[作成] table4_4.html、table4_4.css
[フォルダ] webpage/ch07

➢ table4_4.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table4_4.css">
		<title>セルのサイズ</title>
	</head>
	<body>
		<table>
			<tr>
				<td class="td-first">A1</td>
				<td>A2</td>
			</tr>
			<tr>
				<td>B1</td>
				<td>B2</td>
			</tr>
		</table>
	</body>
</html>

➢ table4_4.css

@charset "UTF-8";

table {
    border: 1px solid gray;
    width: 400px;
    height: 200px;
}

td {
    border: 1px solid gray;
}

td.td-first {
    width: 70%;
    height: 60%;
}

練習問題

[作成] table6.html、table6.css
[フォルダ] webpage/ch07

➢ table6.html

<!DOCTYPE html>
	<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="table6.css">
		<title>セルのサイズ</title>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="3">111</td>
			</tr>
			<tr>
				<td rowspan="2">222</td>
				<td>333</td>
				<td>444</td>
			</tr>
			<tr>
				<td>555</td>
				<td>666</td>
			</tr>
		</table>
	</body>
</html>


➢ table6.css

@charset "UTF-8";

table {
    border-collapse: collapse;
    border: 1px solid gray;
    width: 350px;
    height: 140px;
}

td {
    border: 1px solid gray;
}