日々のこと

読者です 読者をやめる 読者になる 読者になる

日々のこと

HTMLやCSSのことも書いています。

tableタグを使った表の作り方

スポンサーリンク

HTMLでtableタグを使って表を作る方法です。
今回はtableタグ、thタグ、tdタグ、trタグで表を作っています。

タグを使って作った表

見出しのある表です。thタグで囲んだ部分が見出しとなり、tdタグで囲んだ部分が通常のテキストとなります。

<table>
<tr>
 <th>見出しテキスト</th>
 <th>見出しテキスト</th>
 <th>見出しテキスト</th>
 </tr>
 <tr>
 <td>通常テキスト1行目</td>
 <td>通常テキスト1行目</td>
 <td>通常テキスト1行目</td>
 </tr>
 <tr>
 <td>通常テキスト2行目</td>
 <td>通常テキスト2行目</td>
 <td>通常テキスト2行目</td>
 </tr>
 </table>

(表示例)

見出しテキスト1 見出しテキスト2 見出しテキスト3
通常テキスト1行目 通常テキスト1行目 通常テキスト1行目
通常テキスト2行目 通常テキスト2行目 通常テキスト2行目

見出し部分のセルを結合させたい場合

colspanを使うことで、セルを結合させることもできます。

<table>
<tr>
 <th colspan="3">見出しテキスト1</th>
 </tr>
 <tr>
 <td>通常テキスト1行目</td>
 <td>通常テキスト1行目</td>
 <td>通常テキスト1行目</td>
 </tr>
 <tr>
 <td>通常テキスト2行目</td>
 <td>通常テキスト2行目</td>
 <td>通常テキスト2行目</td>
 </tr>
 </table>

(表示例)

見出しテキスト1
通常テキスト1行目 通常テキスト1行目 通常テキスト1行目
通常テキスト2行目 通常テキスト2行目 通常テキスト2行目

まとめ

tableタグ、thタグ、tdタグ、trタグを使った表の作り方について書きました。

関連記事
www.hibinokoto01.com
www.hibinokoto01.com