CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

   当サイトはアフィリエイト広告を利用しています

HTMLで表をつくりたい。table を作ってみる。

f:id:mikanusagi:20180504150209p:plain 今回はブログ内に表を貼りたかったので、その作り方を調べました。

 

エクセルをペタっと貼れたら楽なのに~(*´Д`)

 

 

構成

まず、どんな構成になっているかというと…

 

f:id:mikanusagi:20180519193243p:plain

表 (table) の中 (黄緑枠) に、行 (tr) があり、その中に各セル (th や td) がある。

見出し用のセルは「th」、データ用のセルは「td」で示す。

 

 

表のタグ 基本編

★ベースになるのはこれ。

<table>☆☆☆</table>:表 (テーブル) を作る。 

<tr>☆☆☆</tr>:横一列のデータ。行。

<th>☆☆☆</th>:表の見出し。

<td>☆☆☆</td>:セルの要素。表のデータ。

 

 

簡単な表を作ってみる。

これをコピペして、あと好きなところを修正して使うのがやりやすいかと思います。

<table>と<th>、<tr>、<td>でやってみます。

とりあえず、table全体に枠線をつけときます。

枠線の太さの指示は、borderを使います。

たとえば table border="10" にします。

<table border="10">

 <tr> 

  <th>ノート</th> 

  <th>えんぴつ</th>

  <th>消しゴム</th>

 </tr>

 <tr>

  <td>ある</td>

  <td>ない</td>

  <td>ある</td>

 </tr>

</table>

 ▲これが▼こうなる。なんかできた (´_ゝ`)

                

ノート えんぴつ 消しゴム
ある ない ある

 

なお、通常は、table border などの枠の指示がないと、枠は表示されないそうですが、

このブログは、薄い枠が表示される仕様のようですね (*´Д`) ふむふむ...

このブログのCSSの影響かなと思うのですが…わかりません (´_ゝ`)

 

 

表を装飾してみる

<caption> ☆☆☆ </caption>:タイトルをつける。

table タグの直下に入れてみる。

<table border="10">

 <caption>タイトル</caption>

  <tr>....                

タイトル
ノート えんぴつ 消しゴム
ある ない ある

試しに一番下にcaptionを入れてみたけど、表示される場所は同じでした。(´_ゝ`)

 

 

bordercolor="#色指定": 枠の色を変える

これでできるはずと思ったのですが…なぜか全くかわらず…。

そういう仕様なのか…(´_ゝ`)?解決したら、ご報告します…。

 

 

bgcolor="#色指定":セルの色を変える

全体をかえる場合 

 <table border="1" bgcolor="#色指定">

※このブログは、見出し部分はこの指示では変な表示になってる気が…

                

ノート えんぴつ 消しゴム
ある ない ある

▼ はてなの見たまま表示だと、指示どおりなのですけど…。

f:id:mikanusagi:20180520045400p:plain 

 

一部変える場合

<td bgcolor="#色指定">ない</td> 

各々のセルで指定する。 

                

ノート えんぴつ 消しゴム
ある ない ある

 

 

colspan="n":n個のセルの水平方向の連結

下の3つを連結する場合。

<tr> 

 <td colspan="3">まとめた</td>

</tr>                

ノート えんぴつ 消しゴム
まとめた

 

右側下2つを連結する場合。

<tr>
 <td colspan="2">ある</td>
 <td>ない</td>
</tr>               

ノート えんぴつ 消しゴム
ある ない

 

 

rowspan="n":n個のセルの垂直方向の連結

左の2つを連結する場合。

<tr>
<td rowspan="2">ノート</td>
<td>えんぴつ</td>
<td>消しゴム</td>
</tr>
<tr>
<td>ある</td>
<td>ない</td>
</tr>             

上部分は<td>3行ありますが、下部分は<td>が2行になります。 

ノート えんぴつ 消しゴム
ある ない

 

 

cellpadding:セルの余白を設定する

たとえば、長い文章だと、こんな感じで枠ぴったりだと、ちょっと…

(文字の調整の都合で変な文章ですみません。)

            

ノート えんぴつ 消しゴム
あるかもしれないし、ないかもしれないし、全く見当もつかない。100円かもしれないし、200円かもしれないし、今日は店が閉まっているかもしれない。 ないと思うけど、どうだろう。100 これはある。

 

たとえば、

<table border="1" cellpadding="20">

としてみると、周りに余白ができて、少しすっきりしました。

(分かりやすくするために広めにとっていますが、見え方はブラウザによるかもです…)

ノート えんぴつ 消しゴム
あるかもしれないし、ないかもしれないし、全く見当もつかない。100円かもしれないし、200円かもしれないし、今日は店が閉まっているかもしれない。 ないと思うけど、どうだろう。100 これはある。

 

一応キャプチャを貼ります。

f:id:mikanusagi:20180520050022p:plain

 ▲これが、▼ こうなります。

f:id:mikanusagi:20180520050038p:plain

 

 

セルのサイズを指定する。width="★%、もしくは数値"

何も指定しない場合は、上のように、自動的に調整されます。

試しに、左の枠を表の幅の50%に指定してみます。

<th width="50%">ノート</th>

 

ノート えんぴつ 消しゴム
あるかもしれないし、ないかもしれないし、全く見当もつかない。100円かもしれないし、200円かもしれないし、今日は店が閉まっているかもしれない。 ないと思うけど、どうだろう。100 これはある。

ノート部分は幅の50%、えんぴつ、消しゴム部分は、自動調整されました。 

 

 

 

以上、初心者の私が最低限押さえておきたいものを、

まとめました。今回はこのへんで。(*'▽')/

 

 

 

参考になるサイトへリンク。

<table frame="値"> テーブルの外枠線を一部消す -HTMLタグ辞典-

<table 属性> テーブルの設定をする -HTMLタグ辞典-

▲ わかりやすくて詳しいです (*´▽`*)