今回はブログ内に表を貼りたかったので、その作り方を調べました。
エクセルをペタっと貼れたら楽なのに～(*´Д｀)
構成
まず、どんな構成になっているかというと…
表 (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="#色指定">
※このブログは、見出し部分はこの指示では変な表示になってる気が…
| ノート | えんぴつ | 消しゴム |
|---|---|---|
| ある | ない | ある |
▼ はてなの見たまま表示だと、指示どおりなのですけど…。
一部変える場合
<td bgcolor="#色指定">ない</td>
各々のセルで指定する。
| ノート | えんぴつ | 消しゴム |
|---|---|---|
| ある | ない | ある |
colspan="n"：ｎ個のセルの水平方向の連結
下の3つを連結する場合。
<tr>
<td colspan="3">まとめた</td>
</tr>
| ノート | えんぴつ | 消しゴム |
|---|---|---|
| まとめた | ||
右側下2つを連結する場合。
<tr>
<td colspan="2">ある</td>
<td>ない</td>
</tr>
| ノート | えんぴつ | 消しゴム |
|---|---|---|
| ある | ない | |
rowspan="n"：ｎ個のセルの垂直方向の連結
左の２つを連結する場合。
<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 | これはある。 |
一応キャプチャを貼ります。
▲これが、▼ こうなります。
セルのサイズを指定する。width="★%、もしくは数値"
何も指定しない場合は、上のように、自動的に調整されます。
試しに、左の枠を表の幅の50%に指定してみます。
<th width="50%">ノート</th>
| ノート | えんぴつ | 消しゴム |
|---|---|---|
| あるかもしれないし、ないかもしれないし、全く見当もつかない。100円かもしれないし、200円かもしれないし、今日は店が閉まっているかもしれない。 | ないと思うけど、どうだろう。100 | これはある。 |
ノート部分は幅の50%、えんぴつ、消しゴム部分は、自動調整されました。
以上、初心者の私が最低限押さえておきたいものを、
まとめました。今回はこのへんで。(*'▽')/
参考になるサイトへリンク。
<table frame="値"> テーブルの外枠線を一部消す -HTMLタグ辞典-
<table 属性> テーブルの設定をする -HTMLタグ辞典-
▲ わかりやすくて詳しいです (*´▽｀*)
