表のコード一覧
コードをコピペしてＨTML編集画面に
貼りつけてください。
％の数字は合計が100になるように設定し
文字数の量に応じて変更してください。
１段ｘ2セル
| ADC | 123 |
【こんな表です】
<style>
table td:nth-child(1) {
width: 50%;
}
table td:nth-child(2) {
width: 50%;
}
</style>
<table>
<tbody>
<tr>
<td> ADC</td>
<td>123</td>
</tr>
</tbody>
</table>
１段ｘ３セル
| ADC | 123 | 🌸🌸🌸🌸🌸🌸🌸 |
【こんな表です】
<style>
table td:nth-child(1) {
width: 30%;
}
table td:nth-child(2) {
width: 30%;
}
table td:nth-child(3) {
width: 40%;
}
</style>
<table>
<tbody>
<tr>
<td> ADC</td>
<td>123</td>
<td>🌸🌸🌸🌸🌸🌸🌸</td>
</tr>
</tbody>
</table>
１段ｘ４セル
最初に説明しておきます。
ＰCで見ると問題ありませんが
スマホで見ると🌸が縦に並んでいると思います。
このブログデザインの場合
スマホでは1行に14文字しか書けません。
それ以上の文字数になると
どこかのセルの文字が縦書きになってしまいます。
下に長い表は問題ありませんが
横長の表には限度が有ります。
| ADC |
12345 |
🌸🌸🌸🌸🌸🌸🌸 | ★★★★★★★★★★ |
【こんな表です】
<style>
table td:nth-child(1) {
width: 10%;
}
table td:nth-child(2) {
width: 20%;
}
table td:nth-child(3) {
width: 30%;
}
table td:nth-child(4) {
width: 40%;
}
</style>
<table>
<tbody>
<tr>
<td> ADC</td>
<td>12345</td>
<td>🌸🌸🌸🌸🌸🌸🌸</td>
<td>★★★★★★★★★★</td>
</tr>
</tbody>
</table>
２段ｘ2セル
| ADC | 123 |
| 🌸🌸🌸 | ★★★ |
【こんな表です】
<style>
table td:nth-child(1) {
width: 50%;
}
table td:nth-child(2) {
width: 50%;
}
</style>
<table>
<tbody>
<tr>
<td> ADC</td>
<td>123</td>
</tr>
<tr>
<td> 🌸🌸🌸</td>
<td>★★★</td>
</tr>
</tbody>
</table>
２段ｘ３セル
| ♥♥♥ | ♠♠♠ | ♦♦♦ |
| ハート | スペード | ダイヤ |
【こんな表です】
<style>
table td:nth-child(1) {
width: 30%;
}
table td:nth-child(2) {
width: 30%;
}
table td:nth-child(3) {
width: 40%;
}
</style>
<table>
<tbody>
<tr>
<td>♥♥♥</td>
<td>♠♠♠</td>
<td>♦♦♦</td>
</tr>
<tr>
<td> ハート</td>
<td>スペード</td>
<td>ダイヤ</td>
</tr>
</tbody>
</table>
３段ｘ2セル
| ★★★ | 星・星・星 |
| 🌙🌙🌙 | 月・月・月 |
| 🌞🌞🌞 | 太陽・太陽・太陽 |
【こんな表です】
<style>
table td:nth-child(1) {
width: 50%;
}
table td:nth-child(2) {
width: 50%;
}
</style>
<table>
<tbody>
<tr>
<td>★★★</td>
<td>星・星・星</td>
</tr>
<tr>
<td> 🌙🌙🌙</td>
<td>月・月・月</td>
</tr>
<tr>
<td> 🌞🌞🌞</td>
<td>太陽・太陽・太陽</td>
</tr>
</tbody>
</table>
３段ｘ３セル
| ♥♥♥ | ♠♠♠ | ♦♦♦ |
| ハート | スペード | ダイヤ |
| ハート・ はーと | スペード・すぺーど | ダイヤ・だいや |
【こんな表です】
<style>
table td:nth-child(1) {
width: 30%;
}
table td:nth-child(2) {
width: 30%;
}
table td:nth-child(3) {
width: 40%;
}
</style>
<table>
<tbody>
<tr>
<td>♥♥♥</td>
<td>♠♠♠</td>
<td>♦♦♦</td>
</tr>
<tr>
<td> ハート</td>
<td>スペード</td>
<td>ダイヤ</td>
</tr>
<tr>
<td>ハート・ はーと</td>
<td>スペード・すぺーど</td>
<td>ダイヤ・だいや</td>
</tbody>
</table>
４段ｘ2セル
| 1段目 | ★★★★★ |
| 2段目 | ★☆★☆★☆★☆★ |
| 3段目 | ☆彡☆彡☆彡☆彡☆彡 |
| 4段目 | ★彡★彡★彡★彡★彡 |
【こんな表です】
<style>
table td:nth-child(1) {
width: 50%;
}
table td:nth-child(2) {
width: 50%;
}
</style>
<table>
<tbody>
<tr>
<td>1段目</td>
<td>★★★★★</td>
</tr>
<tr>
<td> 2段目</td>
<td>★☆★☆★☆★☆★</td>
</tr>
<tr>
<td> 3段目</td>
<td>☆彡☆彡☆彡☆彡☆彡</td>
</tr>
<tr>
<td> ４段目</td>
<td>★彡★彡★彡★彡★彡</td>
</tr>
</tbody>
</table>
４段ｘ３セル
| 1段目 | ★★★ | ☆☆☆ |
| 2段目 | ♥♥♥ | ♡♡♡ |
| 3段目 | ●●● | 〇〇〇 |
| 4段目 | ■■■ | □□□ |
【こんな表です】
<style>
table td:nth-child(1) {
width: 30%;
}
table td:nth-child(2) {
width: 30%;
}
table td:nth-child(3) {
width: 40%;
}
</style>
<table>
<tbody>
<tr>
<td>1段目</td>
<td>★★★</td>
<td>☆☆☆</td>
</tr>
<tr>
<td> 2段目</td>
<td>♥♥♥</td>
<td>♡♡♡</td>
</tr>
<tr>
<td>3段目</td>
<td>●●●</td>
<td>〇〇〇</td>
</tr>
<tr>
<td>4段目</td>
<td>■■■</td>
<td>□□□</td>
</tr>
</tbody>
</table>
横セルの増やし方
<style>
table td:nth-child(1) {
width: 50%;
}
table td:nth-child(2) {
width: 50%;
}
</style>
赤字の部分はセル数が増えても
変更しないでください。
<style>この間に</style>
table td:nth-child(1) {
width: 50%;
}
上記のセットをセルの数だけ
増やします。
2セルの場合は2セット入れて
（１）（２）とします。
（）内の数字がセルの数です。
％の部分は合計で100になるように設定してください。
縦の段の増やし方
<table>
<tbody>
<tr>
<td> ADC</td>
<td>123</td>
</tr>
</tbody>
</table>
赤字の部分は
段の最初と最後につけるので
変更しないでください。
<tr>
<td> ADC</td>
<td>123</td>
</tr>
この部分が一段分のコードです。
（1段横に2セルの例）
緑の部分を増やしていけば
下に段を増やせます。
画像の入れ方
セルの中には文字だけでなく
画像を入れることもできます。
その場合は画像のURLを
ここに貼り付けます。
<td> 画像のＵＲＬ</td>
|
|
Queens lab.のサブアイコンです |
【こんな風に画像が入ります】
<style>
table td:nth-child(1) {
width: 50%;
}
table td:nth-child(2) {
width: 50%;
}
</style>
<table>
<tbody>
<tr>
<td> ここに画像のURLを入れます </td>
<td>Queens lab.のサブアイコンです</td>
</tr>
</tbody>
</table
画像のＵＲＬ取得方法
編集画面に画像を投稿します。
ＨＴＭＬの画面に切り替えると
<img src=から始まる部分が表示されています。
それをコピーして、この表の場合は
入れたい場所の<td> </td>の間に貼り付けます。
画像の上で右クリックし
画像のアドレスをコピーという方法もありますが
その方法と上記の方法の場合とでは
アドレスが違って表示されます。
その辺の理由はよくわかりませんが
私は、最初に書いた方法で取得しています。
頑張れば進化できるよ！
この表ではサイズ（幅）を指定していません。
画面の幅を100としています。
文字数に合わせて幅を指定するとか
線の太さを変えるとか
要素を加えて行けば
もっと見栄えの良い表ができると思います。
上級者向けのチュートリアルでは
チンプンカンプンの
私にもわかる簡単な表を作りました。
あとは皆様の腕の見せ所
アレンジしてみてください。
