Web プログラミング

【もりけん塾36日目】表(table)を作成と装飾変更方法

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

今、調べながらしているものは以下のとおりです。

  • 画像の中央にテキストを表示する
  • 料金表を作成
  • 画像クリック→スライドさせる

 

今日は表を作成したので、まとめていきます。

 

結合する部分や文字色、背景色、線の装飾などについても調べたので備忘録で記載していきます。

 

こんな方におすすめ

  • HTMLで表を作るのがはじめての人
  • マークアップ言語初心者

完成した表

依頼された表を使用することはよくないので、新たに作成しました!

 

内容は適当で、表がメインです。

 

この表を作成したhtmlコードは以下のとおりです。

 html
<tableborder="0">
<tr>
<th></th>
<thcolspan="2">メニュー</th>
<th>料金</th>
<th>備考</th>
</tr>
<tr>
<th>栄養指導</th>
<tdcolspan="2">基本</td>
<td>3,000円/30分</td>
<td>10分ごとに1,000円かかります。</td>
</tr>
<tr>
<throwspan="2">占い</th>
<tdrowspan="2">基本</td>
<td>タロットカード</td>
<td>1,000円/10分</td>
<tdrowspan="2">
10分ごとに1,000円かかります。<br />タロットと星占いを一緒にすることもできます。
</td>
</tr>
<tr>
<td>星占い</td>
<td>1,000円/10分</td>
</tr>
<tr>
<throwspan="3">食占い</th>
<tdcolspan="2">食占い</td>
<td>2,000円/20分</td>
<tdrowspan="3">
※病気の方はお近くの病院で医師の指示に従ってください。
</td>
</tr>
<tr>
<!-- <th rowspan="2"></th> -->
<tdcolspan="2">健康占い</td>
<td>2,000円/20分</td>
</tr>
<tr>
<!-- <th rowspan="2"></th> -->
<tdcolspan="2">開運食占い</td>
<td>1,000円/10分</td>
</tr>
</table>

 

次にcss。

 css
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
table th {
padding: 10px;
background-color: chocolate;
color: antiquewhite;
font-weight: bold;
}
table td {
padding: 3px10px;
color: chocolate;
background-color: antiquewhite;
text-align: center;
}

 

この表の作成に至るまでの流れやそれぞれの意味などについてまとめていきます。

 

HTMLでの表作成

まず、表を作成するのに必要なものたちを紹介していきますね!

 

▶table:表全体で囲む
▶tr(table row):行のかたまり。いくつ使用してもOK。trの数が表の行数。
▶th(table Header):見出しの文字
▶td(table date):各セル。いくつ使用してもOK

 

上記の順番にまとめていきます。

 

table:表全体を囲む

表全体を囲むのに必要なのはtableです。

 

使い方は以下のとおり。

 

 html
<table>
~
</table>

 

今回の表は以下のように<tableborder="0">を使用しています。

こちらは表に境界線を生み出すという指示になります。

 

 html
<tableborder="0">
~
</table>

 

このように表を作成するときに使うのはtableを使用します。

 

このtableの中に

  • tr
  • th
  • td

などが入ります。

 

tr:『行』全体を挟む

trは行の全体を挟む役割があります。

 

引用:表(table)の作り方と装飾の変え方【HTML&CSS】

 

trの数だけ行が増えていきますね!

 

(やっぱりサルワカ先生の記事わかりやすい…!)

 

th:見出し

thは表の見出しの部分です。

 

引用:表(table)の作り方と装飾の変え方【HTML&CSS】

 

見出しにしたい部分を選択すると色がかわります!

 

td:表の中身

tdは中身の部分。

 

引用:表(table)の作り方と装飾の変え方【HTML&CSS】

 

tdとthの数だけ列が増えていきます!

 

 

ポイント

  • trの数だけ行が増える
  • tdとthの数だけ列が増える

 

trとtd、thをうまく使って、縦と横の表のバランスをとっていくことができます。

 

表の余白『padding』を使う

余白がないと表が息苦しい状態になるのでpaddingを使用して表にゆとりをもたせます。

 

cssでthとtdにpaddingをします。

表の装飾方法

文字色や背景色、文字の位置など表の装飾方法についてまとめていきます。

文字色

文字色はcssでcolorを変えたいところに指定して色を変えるだけ。

 

thを指定した場合は見出しの文字色が変わります。

背景色

背景色はcssでbackground-colorを指定するだけ。

 

tdを指定すると表の中の部分の色がかわります。

文字の位置

表の文字を中央に寄せたい場合はtext-alignでceterを指定すればOK。

 

tablleと通常の文字の指定方法は同じ。

 

しかしtrやth、tdなど似ているので、違いが分かれば簡単な表の作成です。

枠線を変える方法

枠線を変更する方法について。

線の有無

表の枠線はtableborder="0"でborderが消えます。

 

今回"0"で表した数字は太さを示す数字になります。

セル結合

セル結合は縦と横で異なります。

 

  • rowspanで縦
  • colspanで横

 

以下のように結合したい文字に上記の2つを記載すれば結合されます。


ーーーーーーー
<th rowspan="3">Application procedure</th>
<td>Certficate of Eligibility Application</td>
<td>Change of residency status</td>
<td></td>
</tr>
<tr>
<!-- <th rowspan="2"></th> -->
<td>あ</td>
</tr>
<tr>
<!-- <th rowspan="2"></th> -->
<td>あ</td>
ーーーーーーー

 

おわりに

料金表を作成するために縦7、横5でセル結合がいくつかあり複雑だったので表の作成方法をまとめました!

 

thやtr、tdが似ていたので最初表を見たとき見分けが頭で処理しづらかったですが、記事をかくことやサルワカさんの記事を読んで違いがわかりました!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada