テーブルの外観を作る――（例）５行２列のテーブルを作成する
☆ＨＴＭＬ５
table-base.html
...
<div id="main">
<article>
<h1>.........</h1>
<!-- div id="main"とarticle、h1 は ２カラムＨＰの部品-->
<table>
<caption>......</caption>
<!-- テーブルにその内容を説明・補足するキャプションを追加することができる。キャプションは、他の子要素の上に必ず書きます。④ キャプションをテーブルの下に置くときには、CSSでtable {caption-side: bottom;}と記入します。 -->
<thead>
<!-- ヘッダー行をグループ化する。⑤ -->
<tr>
<th scope="col">......</th>
<!-- scope属性：thに見出しに関連するセルの方向を指定する。th scope="col"② ないしはth scope="row"③ -->
<th scope="col">......</th>
</tr>
</thead>
<tbody>
<!-- ボディー行をグループ化する。⑤ -->
<tr>
<th scope="row">......</th>
<td>......</td>
</tr>
<tr>
<th scope="row">......</th>
<td>......</td>
</tr>
<tr>
<th scope="row">......</th>
<td>......</td>
</tr>
<tr>
<th rowspan="3" scope="row">......</th>
<!-- 行ないしは列を結合するためには、rowspan属性、colspan属性を使います。rowspan属性の場合、空の列は省略して書きません。colspan属性の場合、空の行は省略して書きません。① -->
<td>......</td>
</tr>
<tr>
<td>......</td>
</tr>
<tr>
<td>......</td>
</tr>
</tbody>
</table>
</article>
</div>
...
CSSで見映えを調整する
☆ＣＳＳ３
キャプションをテーブルの下に置く
table-base.css
/* キャプションをテーブルの下に置く ここから ↓ */
table {
border-collapse: collapse;
caption-side: bottom;
}
/* キャプションをテーブルの下に置く ここまで ↑ */
テーブルのレイアウトを調整する
table-base.css
/* テーブルのレイアウトを調整する ここから ↓ */
table th, table td {
padding: ...px;
border: ...px solid #......;
}
/* テーブルのレイアウトを調整する ここまで ↑ */
テーブルの基本的なレンダリング
table-base.css
/* テーブルの基本的なレンダリング ここから ↓ */
table {
width: ...%;
}
/* テーブルの基本的なレンダリング ここまで ↑ */
table-layout プロパティ
table-base.css
/* table-layout プロパティ ここから ↓ */
table {
table-layout: auto;
/* ないしは */
table-layout: fixed;
/* など */
}
/* table-layout プロパティ ここまで ↑ */
二重になっている罫線を１本にする
table-base.css
/* 二重になっている罫線を１本にする ここから ↓ */
table {
border-collapse: collapse; /* ２重線は、separate */
}
/* 二重になっている罫線を１本にする ここまで ↑ */
1列目のセル幅を指定する
table-base.css
/* 1列目のセル幅を指定する ここから ↓* /
table tr th:first-child {
width: ...px;
}
/* 1列目のセル幅を指定する ここまで ↑ */
2行目以降のテキストを上端揃えにする
table-base.css
/* 2行目以降のテキストを上端揃えにする ここから ↓ */
table tbody th,
table tbody td {
vertical-align: top;
}
/* 2行目以降のテキストを上端揃えにする ここまで ↑ */
奇数行と偶数行で背景色を変える
table-base.css
/* 奇数行と偶数行で背景色を変える ここから ↓ */
table thead tr th {
background-color: #......;
}
table tbody tr:nth-child(odd) {
background-color: #......; /* 奇数行背景色 */
}
table tbody tr:nth-child(even) {
background-color: #......; /* 偶数行背景色 */
}
/* 奇数行と偶数行で背景色を変える ここまで ↑ */
キャプションのCSSを調整する
table-base.css
/* キャプションのCSSを調整する ここから ↓ */
table {
……
}
caption {
text-align: left;
margin-bottom: ...px;
}
caption p {
margin-top: ...px;
margin-bottom: ...px;
}
table th, table td {
……
}
/* キャプションのＣＳＳを調整する ここまで ↑ */