HTMLテーブルタグの基礎

IT周辺基礎知識

HTMLテーブルタグ

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

● 列を作る
<tr> :table row 列(1列目、2列目…を作りたい時)

●列の中に文字を入れる

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

 タイトル  タイトル  タイトル  タイトル  タイトル  タイトル タイトル タイトル タイトル
 2 3 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;”>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>

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>

タイトルとURLをコピーしました