低所得の青色申告個人事業主のブログ

開業から経験で得た情報をお知らせしていきたいと思います。

= グローバル ナビゲーション =

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


[ スポンサー リンク ]

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

これからBrooklynへ変更予定。

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

 

Excel から Copy & Paste

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

 

無料サービス利用

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

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

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

 

表のhtml基本構造

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

<table style>

    <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>
  A B C D E
1 国番号 2桁 3桁 数字 国名
2 1 US USA 840 アメリカ合衆国
3 81 JP JPN 392 日本