CODING

[HTML] 表を作るtable

投稿日:


どうも、べ〜やんです。

今回はHTMLでtableタグを使って表を作る方法を紹介します。

表の例




表を使う


表を使うと伝えたい情報を分かりやすく伝えることができます。

HTMLには簡単に表を作れる便利なtableタグがあります。



tableの基本


tableタグはtrthtdタグと組み合わせて使います。

<table></table>で囲んだ中にtrthtdタグを書いていきます。

trthtdタグの組み合わせ方によってさまざまなタイプの表を作れます。

<table>


</table>


tr要素


trタグはTable Rowの略で、行を作ります。

行の数だけ<tr></tr>を使います。

<tr></tr>の中でthtdを使います。

<table>
 <tr>

 </tr>
 <tr>

 </tr>
 <tr>

 </tr>
</table>


th要素


thタグはTable Headerの略で、表の中の見出しダグです。

thタグは、自動で太字になったりテキストを中央揃えにしてくれます。

見出しが必要ない場合は、thタグは使わなくてもOKです。

<table>
 <tr>
  <th>名前</th><th>年齢</th><th>職業</th>
 </tr>
 <tr> 

 </tr>
 <tr>

 </tr>
</table>


td要素


tdタグはTable Dataの略で、表のデータを表すタグです。

<table>
 <tr>
  <th>名前</th><th>年齢</th><th>職業</th>
 </tr>
 <tr> 
  <td>Aさん</td><td>30</td><td>デザイナー</td>
 </tr>
 <tr>
   <td>Bさん</td><td>22</td><td>コーダー</td>
 </tr>
</table>

まだ表ぽっくありませんね。

See the Pen MWWmgxQ by beeyan (@orientado) on CodePen.


もっと表ぽっくしていきます。



見た目


枠線

<table>border=” ”を与えると枠線ができます。border=” ”に1以上の数字を入れます。この数字で外線の太さが変わります。

<table border=”1″>

See the Pen gOOWYyP by beeyan (@orientado) on CodePen.


<table border=”7″>

See the Pen pooPzBd by beeyan (@orientado) on CodePen.


またbgcolor=” “で背景色を指定できます。

<table>bgcolor=” ”を与えると背景色が全体に指定できます。

See the Pen WNNjeqj by beeyan (@orientado) on CodePen.


<table>bgcolor=” ”を与えると背景色が全体に指定できます。

<table>ではなく<tr><th><td>などに与えれば指定のセルにのみ色を与えることができます。

See the Pen MWWmgMV by beeyan (@orientado) on CodePen.


大きさ

widthheightで大きさの指定ができます。

<table>に指定すると全体の大きさ、<tr><th><td>に指定すると各要素のみの指定になります。

<table border="1" width="250" height="200">
 <tr bgcolor="#A5D1F3" height="50%">
  <th width="30%">名前</th><th>年齢</th><th width="50%">職業</th>
 </tr>

See the Pen rNNmxoM by beeyan (@orientado) on CodePen.


セルの結合

縦結合 rowspan

rowspan=”結合したい数”で縦方向にセルを結合します。

See the Pen VwwbedQ by beeyan (@orientado) on CodePen.


横結合 colspan

colspan=”結合したい数”で横方向にセルを結合します。

See the Pen VwwbedQ by beeyan (@orientado) on CodePen.


CSS

もちろんCSSで見た目を整えることもできます。

ちなみに、枠線の隙間を無くしたい場合はborder-collapse: collapse;で隙間を消せます。

See the Pen pooPzZw by beeyan (@orientado) on CodePen.



おわりに


今回は、HTMLで表を作るtableタグの使い方を紹介しました。

文章だけでは分かりにく情報も表を使うと分かりやすく伝えらえるので、ぜひ使ってみてください。



-CODING
-,

執筆者:


comment

関連記事

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] 変形transformの使い方

どうも、べ〜やんです。 今回は、デザインを変形させるtransformを紹介します。 transformとは transformは変形を指定するプロパティで、transitionとセットで使用すること …