| 行１列１見出し | 行１列２見出し | 行１列３見出し |
|---|---|---|
| 行２列１ | 行２列２ |
行２列３（右寄せ）
|
| 行３列１ | 行３列２ |
行２列３
（右寄せ） |
【メモ】
はてなブログの公式テーマ「Smooth」の表の罫線の色や太さを調整できるCSS - blog-RuinDig
※通常のボーダー設定ではうまく枠線表示されず、これに最も苦労したが、このCSSであればExcelコピペでも適当に表示される
※「font-size: 14px;」はオリジナルで付け加えたもの（通常は16pxだが、加えればフォントサイズの調整も可能）
.entry-content table th {
font-size: 14px;
border: 2px;
border-style: solid;
border-color: #a9a9a9;
}
.entry-content table td {
font-size: 14px;
border: 2px;
border-style: solid;
border-color: #a9a9a9;
}
【ひな形】
- 以下のコードをひな形とする（あとから行数、列数、見出し位置、枠内配置も調整可能）
- まず１行目で列数を決めてしまう
- あわせて見出しを１行目にまとめるか列ごとにするかも決めてしまう
- 続けて２行目以降、１行目で決めた列数で必要な数だけ枠組を加えていく
【ひな形：３列の表組みで１行目に見出しをまとめたもの】
- <tr>行<tr/>ごとに、列を追加していく
- 列の追加は種別で使い分ける <th>見出し<th/> <td>通常<td/>
- 改行する場合は、<br>を入れる
- 配置指定がある場合は、列のタグ内に<div align="right">文字</div>タグを挟む（right部分を変えれば左寄せもセンターも可能）
| 行１列１見出し | 行１列２見出し | 行１列３見出し |
|---|---|---|
| 行２列１ | 行２列２ |
行２列３（右寄せ）
|
| 行３列１ | 行３列２ |
行２列３
（右寄せ） |
<table>
<tbody>
※１行目（３列すべて見出し）
<tr>
<th>行１列１見出し</th>
<th>行１列２見出し</th>
<th>行１列３見出し</th>
</tr>
※２行目（３列目のみ右寄せ）
<tr>
<td>行２列１</td>
<td>行２列２</td>
<td>
<div align="right">行２列３（右寄せ）</div>
</td>
</tr>
※３行目（３列目のみ右寄せ＆改行）
<tr>
<td>行３列１</td>
<td>行３列２</td>
<td>
<div align="right">行２列３<br/>（右寄せ）</div>
</td>
</tr>
</tbody>
</table>
