テーブルの外観を作る――（例）５行２列のテーブルを作成する

☆ＨＴＭＬ５

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 {
	……
}
/* キャプションのＣＳＳを調整する ここまで ↑ */