Tableの行の指定の忘備録

11月の終わりがあと残り数日…

本格的な寒さになってきましたね。

でも、昼間はちょっと暑さを感じたり寒さを感じてますが、ニュースを見ると北部のほうではもう雪とか始めてるそうですね。

寒さが続く中、インフルエンザも蔓延してるみたいなんですが…

感染しないように気を付けてください。

さてと、話題を取り戻して…

Tableの行の指定の忘備録

ある業者が、Tableのレイアウトを「エクセル風」にしてほしいという要望が出ました…

Excelならわかりますが、エクセル風？

こっちは「？？？？」となったので、業者とやり取りをしました。

なんか、数字は右寄せとか見出し部分はセンタリングとか…

そういう意味の話でした。

こちらはずっと、エクセルの業務から数年以上離れているため、何のことかわかりませんでした。

やっぱりしっかりと過去の復習はしっかりとしとかないとだめだなぁと反省。

技術の忘備録として記載しておきます。

<table>
	<thead>
		<tr>
			<th>都市名</th>
			<th>首都</th>
			<th>人口</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>北海道</td>
			<td>札幌</td>
			<td>1956,928</td>
		</tr>

		<tr>
			<td>青森</td>
			<td>札幌</td>
			<td>275,192</td>
		</tr>

		<tr>
			<td>秋田県</td>
			<td>秋田市</td>
			<td>292,377</td>
		</tr>
	</tbody>
</table>

CSSは好みに合わせて調整してください。

table {
	border: 1px solid #333;
	border-collapase: collapase;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

table thead th,
table thead td,
table tbody th,
table tbody td {
	border: 1px solid #333;
	padding: 20px;
	vertical-align; middle;
}

table thead th,
table thead td{
	text-align: center;
}

table tbody td:last-of-child {
	text-align: right;
}

「疑似要素」を取り入れることで、きれいに右寄せができます。

技術の忘備録でした。

では、また！