記事ディレクトリ
シート
フォームの説明（フォームの作成）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
1. 説明
- 表は日常生活でよく使われますが、例えばエクセルは表を作成することに特化したツールです。
- テーブルは、コーススケジュールや銀行取引明細書など、いくつかの書式設定されたデータを表すために使用されます。
- Web ページ上にさまざまなテーブルを作成することもできます。
2. 設定
- HTML では、table タグを使用してテーブルを作成します
<table border="1" width="40%" align="center"></table>
- テーブル内の行を表すには、テーブル内で tr を使用します。複数の行に複数の tr があります。
- tr にセルを作成するには td を使用する必要があります。td はセルの数だけ存在します。
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
- rowspan は垂直結合セルを設定するために使用されます
<td rowspan="2">B4</td>
- Colspan 水平結合セル
<td colspan="2">D3</td>
ヘッダーと表の境界線のスタイル設定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
/* border: 1px solid black; */
border-collapse: collapse;
/*设置背景颜色*/
/* background-color: #bfa; */
}
/*
* 设置边框
*/
td,
th {
border: 1px solid black;
}
/*
* 设置隔行变色
*/
tbody > tr:nth-child(even) {
background-color: #bfa;
}
/*
* 鼠标移入到tr以后，改变颜色
*/
tr:hover {
background-color: #ff0;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<tr>
<!--
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
Web フロントエンド-HTML-テーブル-テーブルの境界線スタイルの設定
1. 設定
- 境界線の間隔
- テーブルとTDの境界線の間にはデフォルトの距離があります
- この距離は、border-spacing 属性を通じて設定できます。
border-spacing: 0px;
- ボーダーコラプス
- テーブルの境界線の結合を設定するために使用できます
- 境界線の結合が設定されている場合、境界線の間隔調整は自動的に失敗します。
border-collapse: collapse;
- th タグを使用して、ヘッダー内のコンテンツを表すことができます。
- 使い方は td と同じですが、デフォルトの効果がある点が異なります。
ロングテーブルの構造と補足
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
1. 説明
- 場合によってはフォームが非常に長い場合があります
- このとき、テーブルをヘッダー、テーブル本体、テーブルの下部の3つの部分に分割する必要があります。
2. 構造
- HTML には 3 つのタグが提供されています。
- thead ヘッダーは常にテーブルの先頭に表示されます。
- tbody テーブル本体は常にテーブルの中央を表示します。
- tfoot テーブルの一番下には常にテーブルの一番下が表示されます
- これら 3 つのタグの目的は、テーブルのさまざまな部分を区別することであり、すべてテーブルのサブタグです。
- すべてテーブルに直接書き込む必要があり、tr はこれらのタグに書き込む必要があります。
3. 補足
- tbody がテーブルに書かれていない場合、ブラウザは自動的に tbody をテーブルに追加します。
- そして、すべてのtrをtbodyに入れるので、trはtableの子要素ではなく、tbodyの子要素であることに注意してください
- table > tr では行を選択できません。tbody > tr を渡す必要があります。
テーブル レイアウト (廃止)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
1. テーブル レイアウト (CSS によってすでに廃止されました)
- 以前は、ページのレイアウトにはテーブルが主に使用されていましたが、この方法は CSS によって廃止されて久しいです。
- テーブル内の列の数は、td が最も多い行によって決まります。
- テーブルはネストでき、td に別のテーブルを配置できます。