ブログに表を乗せるとき、tableの罫線を書くのに困っていた。
<table style="border-collapse:collapse">
<tbody>
<tr>
<td style="border:solid 1px black; text-align:center;">要素1</td>
<td style="border:solid 1px black; text-align:center;">要素2</td>
<td style="border:solid 1px black; text-align:center;">要素3</td>
</tr>
</tbody>
</table>
ロックウェル スーパーフィシャル硬さ (予荷重3kgf) |
ロックウェル硬さ (予荷重10kgf) |
|||||
測定荷重 | 15kgf | 30kgf | 45kgf | 60kgf | 100kgf | 150kgf |
1/16"硬球 | 15T | 30T | 45T | F | B | G |
1/8"硬球 | (15W) | (30W) | (45W) | H | E | K |
1/4"硬球 | (15X) | (30X) | (45X) | L | M | (P) |
1/2"硬球 | (15Y) | (30Y) | (45Y) | R | (S) | (V) |
Diamond | 15N | 30N | 45N | A | D | C |
というように今まで書いていたのだが(ページのcssをいじれないので、インラインcssで頑張るよりほかになかった)、文字数が膨大になってしまい、gooブログの文字数制限30,000文字位内に入らないことがあった。上記で3108文字です。
罫線の引き方他になかったかなと思っていたらあった。
<table style="border-collapse:collapse;" border="1">
<tbody>
<tr>
<td align="center">要素1</td>
<td align="center">要素2</td>
<td align="center">要素2</td>
</tr>
</tbody>
</table>
ロックウェル スーパーフィシャル硬さ (予荷重3kgf) |
ロックウェル硬さ (予荷重10kgf) |
|||||
測定荷重 | 15kgf | 30kgf | 45kgf | 60kgf | 100kgf | 150kgf |
1/16"硬球 | 15T | 30T | 45T | F | B | G |
1/8"硬球 | (15W) | (30W) | (45W) | H | E | K |
1/4"硬球 | (15X) | (30X) | (45X) | L | M | (P) |
1/2"硬球 | (15Y) | (30Y) | (45Y) | R | (S) | (V) |
Diamond | 15N | 30N | 45N | A | D | C |
こちらは1720文字。一つのtd要素で57文字使っていたのが25文字で済むようになる。913要素ある表を載せたが29,216文字節約できていたことになる。
追記:少々問題があって、スマホのブラウザから見ると罫線が表示されないorz
多分border="1"の部分が現行のHTMLでサポートされてないのでしょう。