【超簡単】はてなブログの定型文を活用！表の作り方

ブログサポート60

 

1 user

【動画】はてなブログに表を載せる３選！エクセル変換でスクロール（スマホレスポ...

https://blog-support.jp/hatenablog-table/

2019年6月8日更新「はてなブログに簡単に画像を貼り付けるって難しい」と思っていますか?覚えてしまえばとても簡単ですよ。【結論】表をキャプチャ（スクリーンショット）して、画像として貼り付ける方法が一番簡単です。しっかり、表をHTML編集に貼り付けるやり方も載せています。動画を見て、同じように作業をしてください。（はてなブログの表が、スマホレスポンシブデザインで見切れてしまうときの対策も書いています） はてなブログ表を載せる３つのやり方「はてなブログ表を載せる方法」は、おおまかには３つのやり方があり...

表【縦２　横１】

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
</tbody>
</table>

表【縦３　横１】

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
</tbody>
</table>

表【縦３　横２】

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
<th>
B
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
<td>
4
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
<td>
5
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
<td>
6
</td>
</tr>
</tbody>
</table>

表【縦４　横１】

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
</tr>
</tbody>
</table>

表【縦４　横２】

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<thead>
<tr>
<th>

</th>
<th>
A
</th>
<th>
B
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
<td>
5
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
<td>
6
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
<td>
7
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
<td>
8
</td>
</tr>
</tbody>
</table>

表３行

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
</tbody>
</table>

表４行

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
</tr>
</tbody>
</table>

表５行

<style>
table {
border-collapse: collapse;
}
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<table>
<tbody>
<tr>
<th>
a
</th>
<td>
1
</td>
</tr>
<tr>
<th>
b
</th>
<td>
2
</td>
</tr>
<tr>
<th>
c
</th>
<td>
3
</td>
</tr>
<tr>
<th>
d
</th>
<td>
4
</td>
</tr>
<tr>
<th>
e
</th>
<td>
5
</td>
</tr>
</tbody>
</table>