HTMLテーブルタグ
オーソドックスなテーブル
<th colspan=“3”>メニュー</th>
<tr>
| メニュー | ||
|---|---|---|
| コーヒー | 紅茶 | オレンジジュース |
| 200円 | 150円 | 100円 |
表に画像を入れる
td の中で imgタグとして画像を読み込む
<html>
<head>
<title>題名</title>
</head>
<body>
<table border=”1″>
<tr>
<td><img src=”https://mariblog.io/wp-content/uploads/2021/01/4292928_s.jpg” width=”100″ height=”76″></td>
</tr>
</table>
</body>
</html>
 |
text。
| タイトル | タイトル | タイトル | タイトル | タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|---|---|---|---|
| １ | ２ | ３ | ４ | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 |
<p style=”text-align: right;”>text。</p>
<table style=”border-collapse: collapse; width: 100%;”>
<tbody>
<tr style=”height: 100px;”>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
<th style=”width: 11.1111%; text-align: center; height: 100px; background-color: #e6e6e6;”> タイトル</th>
</tr>
<tr>
<td style=”width: 11.1111%; text-align: center;”>１</td>
<td style=”text-align: center;” rowspan=”2″> ２</td>
<td style=”text-align: center;” rowspan=”2″> ３</td>
<td style=”text-align: center;” rowspan=”2″>４</td>
<td style=”width: 11.1111%; text-align: center;”> 5</td>
<td style=”text-align: center;” rowspan=”2″>6</td>
<td style=”text-align: center;” rowspan=”2″>7</td>
<td style=”width: 11.1111%; text-align: center;”>8</td>
<td style=”width: 11.1111%; text-align: center;”>9</td>
</tr>
<tr>
<td style=”width: 11.1111%; text-align: center;”>10</td>
<td style=”width: 11.1111%; text-align: center;”>11</td>
<td style=”width: 11.1111%; text-align: center;”>12</td>
<td style=”width: 11.1111%; text-align: center;”>13</td>
</tr>
</tbody>
</table>
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|---|---|---|---|---|---|---|---|---|---|
| 100% | 50% | 33.3333% | 25% | 20% | 16.6667% | 14.2857% | 12.5% | 11.1111% | 10% |
<table style=”border-collapse: collapse; width: 100%;”>
<tbody>
<tr>
<th style=”width: 10%; text-align: center; height: 100px; background-color: #e6e6e6;”>タイトル</th>
</tr>
<tr>
<td style=”width: 10%; text-align: center; height: 100px;”>テキスト</td>
</tr>
</tbody>
</table>
赤字
<span style=”color: #ff3300;”>赤字</span>
