無料ではじめる!ホームページ入門〜ホームページ作成解説サイト〜 | HOME | HP | HTML | UP | other | Link | about |
HOME > HTML > HTML逆引きリファレンス > テーブル
テーブルテーブル(表)を作りたい
<table ○>〜</table>…表
<table>〜</table>タグでテーブルの範囲を指定します。<tr>〜</tr>タグで行を、<td>〜</td>でセルを指定します。
<table>
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table border="1"> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP テーブルの見出しをつけたい<th>〜</th> <th>〜</th>タグで行や列の見出しを作ることができます。 見出しとして指定されたセルの文字は太字で中央揃えになります。 HTMLソース
<table border="1">
<tr> <th>名前</th> <th>住所</th> <th>電話番号</th> </tr> <tr> <td>○○○○</td> <td>○○県××市△△町</td> <td>○○○−○○○−○○○○</td> </tr> </table> 結果
TOP 枠線の幅を指定したい
<table border="○">〜</table> <table>タグのborder属性で枠線の幅を指定します。 HTMLソース
<table border="1">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table border="7"> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP テーブルの位置を指定したい
<table align="○">〜</table>…表 align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。 HTMLソース
<table border="1" align="left">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <p> align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。 </p> <table border="1" align="right"> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <p> align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。 </p> 結果
align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。
align属性でテーブルの位置を指定します。leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。 TOP テーブルに対する回り込みを解除したい
<br clear="○">
<br>タグにclear属性を指定することで、テキストの回り込みを途中で解除することができます。
<table border="1" align="left">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <p> align属性でテーブルの位置を指定します。 <br clear="left"> leftまたはrightを指定したときは、テーブルに続くテキストがテーブルの横に回りこみます。 </p> 結果
align属性でテーブルの位置を指定します。
TOP キャプション(表のタイトル)をつけたい
<caption align="○">〜</caption>
テーブルにキャプション(タイトル)をつけるには<caption>〜</caption>タグを使います。align属性で位置を指定します。 指定しない場合はテーブルの上部に表示されます。 HTMLソース
<table border="1">
<caption align="top">表1</caption> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table border="1"> <caption align="bottom">表2</caption> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP テーブルのサイズを指定したい
<table width="○" height="●">〜</table>
<table>タグにwidth属性で幅を、height属性で高さを指定します。ただしheight属性で高さを指定する方法は、HTML4.01では定義されていないので、スタイルシートか、<th>タグや<td>タグのheight属性で指定したほうがよいでしょう。 HTMLソース
<table border="1" width="400">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP セルのサイズを指定したい
<th width="○" height="●">〜</th>
<th>タグまたは<td>タグに、width属性やheight属性でセルの幅や高さを指定します。 HTMLソース
<table border="1">
<tr> <td width="150">1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP セルの間隔やマージンを指定したい
<table cellspacing="○" cellpadding="●">〜</table>
cellspacing属性でテーブルの外枠とセル、セルとセルの間隔を指定します。cellpadding属性でセルの枠とセル内の内容との間隔を指定します。 HTMLソース
<table border="1" cellspacing="5" cellpadding="20">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP セル内のテキストの位置を指定したい
<tr align="○" valign="●">〜</tr>
align属性で、データの横方向の位置を指定、valign属性でデータの垂直方向の位置を指定します。
<table border="1" width="420">
<tr> <td align="right" height="50">右</td> <td align="center">中</td> <td align="left">左</td> </tr> <tr> <td valign="top" height="50">上</td> <td valign="middle">中</td> <td valign="bottom">下</td> </tr> </table> 結果
TOP 外枠の表示方法を指定したい
<table frame="○">〜</table>
<table>〜</table>タグのframe属性で外枠の表示方法を指定します。
<table frame="hsides">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table border="1" frame="above"> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP 内側罫線の表示方法を指定したい
<table rules="○">〜</table>
<table>〜</table>タグのrules属性で内側罫線の表示方法を指定します。
<table border="1" rules="rows">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table border="1" rules="cols"> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP テーブルの背景色を指定したい
<table bgcolor="○">〜</table>
<table>タグのbgcolor属性で、テーブル全体の背景色を指定します。<tr>タグでで指定した場合はその横一列、<th>タグ、<td>タグで指定した場合は、そのセルの背景色を変えることができます。
<table border="1" bgcolor="#33CCCC">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table border="1"> <tr bgcolor="red"> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td bgcolor="#66CC33">2−2</td> <td>2−3</td> </tr> </table> 結果
TOP テーブルの背景画像を指定したい
<table background="○">〜</table>
<table>タグのbackground属性で、テーブルの背景画像を指定します。
<table border="1" background="../img/w102.gif">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> <br> <table> <tr> <td>1−1</td> <td background="../img/w102.gif">1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP 縦方向にセルを連結したい
<th rowspan="○">〜</th> <th>タグや<td>タグのrowspan属性で、セルを縦に連結させることができます。 HTMLソース
<table border="1">
<tr> <td rowspan="2">1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP 横方向にセルを連結したい
<th colspan="○">〜</th> <th>タグや<td>タグのcolspan属性で、セルを横に連結させることができます。 HTMLソース
<table border="1">
<tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td colspan="3">2−1</td> </tr> </table> 結果
TOP 列をグループ化したい
<colgroup ○>〜</colgroup>
<colgroup ○>〜</colgroup>タグで縦列のグループ化ができます。
<table border="1">
<colgroup width="100"></colgroup> <colgroup span="2" width="150" align="right"></colgroup> <tr> <td>1−1</td> <td>1−2</td> <td>1−3</td> </tr> <tr> <td>2−1</td> <td>2−2</td> <td>2−3</td> </tr> </table> 結果
TOP セル内の改行を禁止したい
<th nowrap>〜</th>
通常では、テーブルの大きさはブラウザが自動的に調節します。そのためデータが各セルにうまくおさまるように、セル内のテキストが長い場合は自動的に改行されてしまいます。
<table border="1" width="300">
<tr> <td width="60">1−1</td><td width="60">1−2</td> <td>通常では、テーブルの大きさはブラウザが自動的に調節します。</td> </tr> <tr> <td>2−1</td><td>2−2</td><td>2−3</td> </tr> </table> <br> <table border="1" width="300"> <tr> <td width="60">1−1</td><td width="60">1−2</td> <td nowrap>通常では、テーブルの大きさはブラウザが自動的に調節します。</td> </tr> <tr> <td>2−1</td><td>2−2</td><td>2−3</td> </tr> </table> 結果
TOP |
ご意見・ご感想などございましたらこちらまで tada_hp@hotmail.com
Copyright (C) 2004 by K.Y All Rights Reserved.