HTMLテーブルタグで初受注できた

2021.02.03
この記事は約8分で読めます。

HTMLテーブルタグ

オーソドックスなテーブルタグ。これが出来ただけで1週間で15万円の在宅ワークを受注させていただきました。

オーソドックスなテーブル

● 列を作る
<tr> ：table row　列（１列目、２列目…を作りたい時）

●列の中に文字を入れる
<td> ：table data データ　（普通文字）
<th>：table header ヘッダー　（タイトル太字）●列を結合
<thcolspan=“2”>：ヨコに繋げる
<th rowspan=”2″> ：タテに繋げる
<table>
　　<tr>
　　<thcolspan=“3”>メニュー</th>
   </tr>
 　   <tr>
        <td>コーヒー</td>
        <td>紅茶</td>
        <td>オレンジジュース</td>
    </tr>
    <tr>
        <td>200円</td>
        <td>150円</td>
        <td>100円</td>
    </tr>
</table>
メニュー
コーヒー紅茶オレンジジュース
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。

 タイトル  タイトル  タイトル  タイトル  タイトル  タイトル タイトル タイトル タイトル
１ ２ ３４ 56789
10111213

<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>

12345678910
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>

コメント