★タグ
tableタグ
・・・表作成するタグです。中には、trタグ（table row=行です。)thタグ（table header=見出しです）、tdタグ（table data=データです。）などを使って表を作ります。
※tableの開始タグの次にはcaptionタグを入れます。captionは表のタイトルになります。
デフォルトで表の上部にセンタリングして表示されます。が、このブログではなりません。leftですね。
●パターン1
<table border="1" summary="メニュー一覧">
<caption>メニュー一覧</caption>
<tr>
<th>th</th>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>で
●パターン2
<table border="1" summary="メニュー一覧" class="table01">
<caption>メニュー一覧</caption>
<tr>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>td</td>
<td>td</td>
</tr>
</table>で
●パターン3
<table border="1" summary="メニュー一覧" class="table01">
<caption>メニュー一覧</caption>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</table>で
これらの3パターン覚えとけば大体大丈夫だそうです。
他にいろいろパターンがやってみるとあります。
※tableタグのborderは必須属性ではありませんが、付けるとプリントするときに簡易的に枠線を付けてくれます。summaryはアクセシビリティ的なところから見ると必須属性です。
ちなみに上のtableの
CSSの記述は、
/*--.tabletest設定----------------------------------------------*/
.tabletest table {
border: solid 6px;
border-collapse: separate;
border-spacing: 10px;
width: 300px;
}
.tabletest th,.tabletest td{
border: solid 5px #0000ff;
background-color: #ff0000;
}
です。
★CSS↑のCSSで使ってます。
●{ border-collapse: collapse;}
・・・で隣接するセルのボーダを重ねて表示します。
●{ border-collapse: separate;}
・・・で隣接するセルのボーダを分離して表示します。（デフォルトでこっちです。）
※このブログのテンプレのCSSの設定が（※その辺のことはよくわかりません。）はたぶんcollapseになってます。
●{ border-spacing: ～px;}
・・・separateの時、セル間の余白サイズを指定します。単位はpx等です。%は無理でした。emはいけます。
罫線を重ねる順番はtable>th>tdです。ただしtableはth,tdよりborderが1px大きくないと表示されません。（現時点でchromeのブラウザでだけ確認しました。）
※どんな時に利用するのか、まだわからないけど、tableやdivなどのブロック要素はfloatを指定するときにwidthを指定してないとなとfloatが効かないそうです。とりあえず覚えときましょう。
thタグのデフォルトは{ font-weight：bold; text-align:center; }です。このブログではなってませんが本当はそうです。
tdタグのデフォルトは{ font-weight：normal; text-align:left; }です。
tableタグにはmargin,paddingがあります。
th,tdタグにはpaddingしかありません。
trタグにはmargin,paddingがありません。
●tableの特徴
ブロック要素です。
デフォルトでは親要素の幅です。（※ここで言う親要素とはつまりdivのことかな？bodyもあると思います。）
th,tdの幅は内容量によります。いっぱいまで広がります。（※th,tdにheightで数値を指定しても、内容が多いとそれ以上に広がります。）
★セルの結合
●colspan・・・colは列って意味です。横（列）の結合です。
<table border="1" summary="食事メニュー一覧">
<tr>
<th colspan="3">メニュー</th>
</tr>
<tr>
<td>ラーメン</td>
<td>カレー</td>
<td>トマトスープ</td>
</tr>
</table>で
こんな感じに1行目の列の3つセルが結合します。
●rowspan・・・rowは行って意味です。縦（行）の結合です。
<table border="1" summary="食事メニュー一覧">
<tr>
<th rowspan="3">メニュー</th>
<td>ラーメン<td>
</tr>
<tr>
<td>カレーライス</td>
</tr>
<tr>
<td>トマトスープ</td>
</tr>
</table>
●cellpadding属性・・・tableの属性です。枠線とセル内容の間隔をpxで指定します。
●cellspacing属性・・・tableの属性です。セルとセルの間隔をpxで指定します。
↑こんな感じのイメージで
↓先生おすすめのサイトシーイング
伊武 雅人
イエカキ 理想の住まい
RAKUGAKI
株式会社日本デザインセンター
PR
