HTML 表・テーブル table

HTML

【初心者向け】HTML tableタグの使い方・表の作り方を解説

2019年10月8日

今回は、HTMLの学習を始めたばかりの初心者の方を対象に、テーブルタグ(table)を利用して、表を作る方法を説明していきます。
 

 

テーブルタグ tableの基本的な使い方

まずはテーブルを使った表作成の基本を説明していきます。
 

表を作成したい場合は、tableタグを含めて複数のタグを利用して構成します。よく使うタグは下記の通りです。

タグ意味
tableテーブルを定義
trtable rowの略。テーブルの行を定義。
thtable headerの略。テーブルの見出し項目を定義。
tdtable dataの略。テーブルのデータ項目を定義。

 

■tableタグを使った表作成のイメージ
Tableタグの説明
 

まず<table>~</table>で大きくくくります。
html tableタグ
 

次に、tableタグ内に<tr>~</tr>を記述して、表の横一行を定義します。
html tableタグ trタグ
 

trタグのなかで、見出しに該当する項目を、「<th>~<th>」で定義します。
html tableタグ thタグ
 

trタグのなかで、データに該当する項目を<td>~<td>で定義します。
tableタグ セルデータをtdで囲む
 

同様にして、trで行を追加し、tdで中身のデータを入れていきます。
table、tr、th、tdを使って表を作っていく
 

Webブラウザで見た時の表示は下記のようになります。
tableタグで作った表の表示サンプル
※thで記述したセル内は一般的なWebブラウザでは太字で表示されます。
 

 

表の枠線をつけるにはどうすればよいんですか??

 

枠線がありませんが、枠線はborder属性やCSSなどで表示させることができます(後述で説明)

 
 

テーブル・表に枠線をつける

table・表に枠線をつけるには、tableの属性border="1"をつけると簡易的な枠線が作れます。また、CSSでborderを利用して枠線を作ることができます。
 

■表示例 属性border="1"を追記して簡易な枠線を表示する
table 表事例 border=1
 

■上記のソースコード

 

枠線が二重線になっているんですが、一重の枠線にはできないんでしょうか??

 

枠線の細かい設定はCSSで設定することができます。CSSのborderで枠線をつくる方法が今の一般的な方法です。

 

■CSSで枠線を設定した表事例
table 表事例 cssでborder設定
 

■上記のソースコード

 
CSSでは、thとtdに対して枠線borderを設定し、tableタグに対してborder-collapse:collapseを設定します。

  • border-collapse:collapse;・・・th、tdなどの隣接するセルの枠線が重ねて表示される。
  • border-collapse:seperate;・・・th、tdなどの隣接するセルの枠線が間隔を開けて表示される(2重線のようになる)。初期値

 

色々細かいタグや使い方があるんですが、まずは基本的な表が書けるようになれば良いと思います。

 

テーブル内のセルを結合する

テーブル・表はcolspan(列の長さ)やrowspan(行の長さ)といった属性でセルを結合することができます。
 

colspanは列の長さで、colspan="2"で2列分、colspan="3"で3列分のセルになります。
 

■一行目のthをcolspan="2"で結合した例
table 表事例 colspan="2"
 

■上記のソースコード

 

rowspanは行の長さで、rowspan="2"で2行分、rowspan="3"で3行分のセルになります。
 

■2,3,4行目・1列目のtdをrowspan="3"で結合した例
table 表事例 rowspan="3"
 

■上記のソースコード

 

■colspanとrowspanの組み合わせ

 

rowspanやcolspanを設定することで、一行の中のセルの数を調整して合計を合わせる必要があります。

 

このほかにも、theadタグ、tbodyタグ、tfootタグなどあります(必ず使用しなければならないというわけではありません)ので必要に応じて調べて使ってみてください。
 
 

まとめ

まとめです。今回は、、htmlのtableタグを利用して表を作る方法を説明しました。
 

Tableタグの説明
 

HTMLを理解しているとホームページを作る上でできることの範囲が広がります。
 

合わせて読みたい記事

そのほかのHTMLの使い方を「【HTMLの基本を徹底解説!】初心者向けHTMLの基本とよく使うタグ一覧」に記載していますので、HTMLの勉強をしたい方は合わせてご参考ください。
 

CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。

 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-HTML
-,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.