テーブルの基本
[作成] table1.html、table1.css
[フォルダ] webpage/ch07
<!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;
}
テーブルの枠線の幅を変更
[修正] table1.css
[フォルダ] webpage/ch07
@charset "UTF-8";
table {
border: 10px solid gray;
}
td {
border: 1px solid gray;
}
セルの区切り線の幅を変更
[修正] table1.css
[フォルダ] webpage/ch07
@charset "UTF-8";
table {
border: 10px solid gray;
border-spacing: 10px;
}
td {
border: 1px solid gray;
}
セルの内側の余白を変更
[修正] table1.css
[フォルダ] webpage/ch07
@charset "UTF-8";
table {
border: 10px solid gray;
border-spacing: 10px;
}
td {
border: 1px solid gray;
padding: 10px;
}
横方向のセルを連結する
[作成] table3_1.html、table3.css
[フォルダ] 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 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;
}
縦方向のセルを連結する
[作成] 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>
テーブルのサイズをピクセル数で指定する
[作成] table4_1.html、table4_1.css
[フォルダ] webpage/ch07
<!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;
}
テーブルのサイズを比率指定する
[作成] table4_2.html、table4_2.css
[フォルダ] webpage/ch07
<!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;
}
セルのサイズをピクセル数で指定する
[作成] table4_3.html、table4_3.css
[フォルダ] webpage/ch07
<!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_2.css
@@charset "UTF-8";
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
width: 200px;
height: 100px;
}
セルのサイズをピクセル数で指定する
[作成] table4_4.html、table4_4.css
[フォルダ] webpage/ch07
<!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_2.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
<!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>
table4_2.css
@charset "UTF-8";
table {
border-collapse: collapse;
border: 1px solid gray;
width: 350px;
height: 140px;
}
td {
border: 1px solid gray;
}
