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] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

HTMLの改行方法

どうも、べ〜やんです。 今回はHTML5で改行する方法を紹介します。 タグが必要 HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。 <p>HT …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …