【無料はてなブログ】表の作成【Minimalism】【Brooklyn】【罫線】

適用しているデザインテーマは Minimalism 。

これからBrooklynへ変更予定。

基本的にhtml編集しているが、少しだけ楽する方法

Excel から Copy & Paste
無料サービス利用
表のhtml基本構造
実例：横幅を固定、横のセルをつなげる
実例：ヘッダを縦にも用意、横幅は可変

Excel から Copy & Paste

見たまま編集やはてな記法編集などで貼り付ける。これだけで表は作成される

無料サービス利用

htmlコードを作成してくれるサイトがいくつかある。

例えば、これとかこれとか。

セルに色をつけるならこれ。

表のhtml基本構造

最終的にはhtmlを編集することになる。

<tbody>

<tr>

（行の内容）

</tr>

<tr>

（行の内容）

</tr>

</tbody>

</table>

<tr>（行の内容）</tr> の '（行の内容）' の部分に左から右へセルの内容を記述していく。

セルの内容は、ヘッダは <th>～</th> タグで、通常セルは <td>～</td> タグで表現。

実例：横幅を固定、横のセルをつなげる

<table style="font-size: 14px;">
	<tbody>
		<tr>
			<th colspan = "2">借 方</th>
			<th colspan = "2">貸 方</th>
		</tr>
		<tr>
			<td width = 100px>買掛金</td>
			<td width = 70px style = "text-align: right;">4,000円</td>
			<td width = 100px>普通預金</td>
			<td width = 70px style = "text-align: right;">4,000円</td>
		</tr>
		<tr>
			<td width = 100px>支払手数料</td>
			<td width = 70px style = "text-align: right;">100円</td>
			<td width = 100px>普通預金</td>
			<td width = 70px style = "text-align: right;">100円</td>
		</tr>
	</tbody>
</table>

借方		貸方
買掛金	4,000円	普通預金	4,000円
支払手数料	100円	普通預金	100円

実例：ヘッダを縦にも用意、横幅は可変

<table style="font-size: 14px;">
	<tbody>
		<tr>
			<th style = "text-align: center;"></th>
			<th style = "text-align: center;">A</th>
			<th style = "text-align: center;">B</th>
			<th style = "text-align: center;">C</th>
			<th style = "text-align: center;">D</th>
			<th style = "text-align: center;">E</th>
		</tr>
		<tr>
			<th style = "text-align: center;">1</th>
			<td>国番号</td>
			<td>2桁</td>
			<td>3桁</td>
			<td>数字</td>
			<td>国名</td>
		</tr>
		<tr>
			<th style = "text-align: center;">2</th>
			<td style = "text-align: right">1</td>
			<td style = "text-align: left">US</td>
			<td style = "text-align: left">USA</td>
			<td style = "text-align: right">840</td>
			<td style = "text-align: left">アメリカ合衆国</td>
		</tr>
		<tr>
			<th style = "text-align: center;">3</th>
			<td style = "text-align: right">81</td>
			<td style = "text-align: left">JP</td>
			<td style = "text-align: left">JPN</td>
			<td style = "text-align: right">392</td>
			<td style = "text-align: left">日本</td>
		</tr>
	</tbody>
</table>