HTMLテーブルタグ
オーソドックスなテーブルタグ。これが出来ただけで1週間で15万円の在宅ワークを受注させていただきました。
オーソドックスなテーブル
<thcolspan=“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。
タイトル | タイトル | タイトル | タイトル | タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 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;”>1</td>
<td style=”text-align: center;” rowspan=”2″> 2</td>
<td style=”text-align: center;” rowspan=”2″> 3</td>
<td style=”text-align: center;” rowspan=”2″>4</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>
コメント