テーブルタグ |
||||||||||||
|
||||||||||||
テーブル作成<table border="枠線サイズ" align="テーブル位置">〜</table> <tr>〜</tr> <td>〜</td> <th>〜</th> |
||||||||||||
| このタグはテーブルを作成するときに使用するものです。 <table></table>タグはテーブルの最初と最後に指定するものです。 枠線サイズとは枠線のサイズをピクセル単位で指定するときに使用します。 指定しなければ枠線は表示されません。 テーブル位置サンプル： left, right, center leftはテーブルの位置が左、テーブルに続くテキストが右側に表示されます。 rightはテーブルの位置が右、テーブルに続くテキストが左側に表示されます。 centerはテーブル位置が中央、テーブルに続くテキストが下側に表示されます。 <tr></tr>タグは横の行を最初と最後に指定するものです。 <td></td>タグはセル（ひとマス）を指定するものです。 <th></th>タグは縦の列または横の行で見出しを付けるときに使用します。 太字で表示されます。 下記のように挟んで記述します。 記述例 <table border="1" align="right"> <tr> <th>＼</th><th>氏名</th><th>年齢</th><th>性別</th> </tr> <tr> <th>��</th><td>鈴木一郎</td><td>３０歳</td><td>男性</td> </tr> <tr> <th>��</th><td>田中花子</td><td>２５歳</td><td>女性</td> </tr> </table> <p> あるところにエクスピースという会社がございました。 そこが運営しているウェブサイトで名前はエクストラフィックというコミュニティサイトがございました。 そこにはフリーで使用できる掲示板と、これまたフリーで使用できるリンク集がございました。 それとは別にもちろん無料の会員登録をしていただくとよりいっそうのサービスが利用できるそうな。 例えば管理者が付けている不定期な日記帳「管理者日記」やサイト内のニュースを投稿できる「ローカルニュース」などが利用できるそうな。 それとは別に会員登録するとコメントや記事を投稿した数によって「投稿数ランキング」があるそうな。 完全制覇はものすごく難しいそうな。 これだけの記事をどこに表示するのかを見るために書いております。 </p> 実際の表示
あるところにエクスピースという会社がございました。 そこが運営しているウェブサイトで名前はエクストラフィックというコミュニティサイトがございました。 そこにはフリーで使用できる掲示板と、これまたフリーで使用できるリンク集がございました。 それとは別にもちろん無料の会員登録をしていただくとよりいっそうのサービスが利用できるそうな。 例えば管理者が付けている不定期な日記帳「管理者日記」やサイト内のニュースを投稿できる「ローカルニュース」などが利用できるそうな。 それとは別に会員登録するとコメントや記事を投稿した数によって「投稿数ランキング」があるそうな。 完全制覇はものすごく難しいそうな。 これだけの記事をどこに表示するのかを見るために書いております。 |
||||||||||||
| ▲ページトップへ |
回り込み解除<br clear="テーブル位置"> |
||||||||||||
| このタグはテーブルに対しての記事の回りこみを解除する時に使用するものです。 テーブル位置サンプル： left, right, all leftはテーブル位置が左側にあるときに使用します。 rightはテーブル位置が右側にあるときに使用します。 allはどちらの場合でも使用できます。 下記のように間に挟んで記述します。 記述例 <table border="1" align="right"> <tr> <th>＼</th><th>氏名</th><th>年齢</th><th>性別</th> </tr> <tr> <th>��</th><td>鈴木一郎</td><td>３０歳</td><td>男性</td> </tr> <tr> <th>��</th><td>田中花子</td><td>２５歳</td><td>女性</td> </tr> </table> <p> あるところにエクスピースという会社がございました。 そこが運営しているウェブサイトで名前はエクストラフィックというコミュニティサイトがございました。 そこにはフリーで使用できる掲示板と、これまたフリーで使用できるリンク集がございました。 <br clear="right"> それとは別にもちろん無料の会員登録をしていただくとよりいっそうのサービスが利用できるそうな。 例えば管理者が付けている不定期な日記帳「管理者日記」やサイト内のニュースを投稿できる「ローカルニュース」などが利用できるそうな。 それとは別に会員登録するとコメントや記事を投稿した数によって「投稿数ランキング」があるそうな。 完全制覇はものすごく難しいそうな。 これだけの記事をどこに表示するのかを見るために書いております。 </p> 実際の表示
あるところにエクスピースという会社がございました。 そこが運営しているウェブサイトで名前はエクストラフィックというコミュニティサイトがございました。 そこにはフリーで使用できる掲示板と、これまたフリーで使用できるリンク集がございました。
|
||||||||||||
| ▲ページトップへ |
テーブルサイズ指定<table width="幅" height="高さ">〜</table> <th width="幅" height="高さ">〜</th> <td width="幅" height="高さ">〜</td> |
||||||||||||
| このタグはテーブルを作成するときにサイズを指定するものです。 幅と高さはピクセルサイズかまたはウィンドウサイズに対するパーセントで指定します。 下記のように間に挟んで記述します。 記述例 <table border="1" width="300" height="100"> <tr> <th height="40">＼</th><th>氏名</th><th>年齢</th><th>性別</th> </tr> <tr> <th>��</th><td>鈴木一郎</td><td>３０歳</td><td>男性</td> </tr> <tr> <th>��</th><td width="100">田中花子</td><td>２５歳</td><td>女性</td> </tr> </table> 実際の表示
|
||||||||||||
| ▲ページトップへ |
タイトルを付ける<caption align="タイトル場所指定">〜</caption> |
||||||||||||
| このタグはテーブルにタイトルを指定するものです。 タイトル場所指定サンプル： top, bottom topはテーブルの上部に表示させます。 bottomはテーブルの下部に表示させます。 下記のように間に挟んで記述します。 記述例 <table border="1" width="300" height="100"> <caption>サンプルデータ</caption> <tr> <th height="40">＼</th><th>氏名</th><th>年齢</th><th>性別</th> </tr> <tr> <th>��</th><td>鈴木一郎</td><td>３０歳</td><td>男性</td> </tr> <tr> <th>��</th><td width="100">田中花子</td><td>２５歳</td><td>女性</td> </tr> </table> 実際の表示
|
||||||||||||
| ▲ページトップへ |
テーブル内テキスト位置指定<tr align="横位置" valign="縦位置">〜</tr> <th align="横位置" valign="縦位置">〜</th> <td align="横位置" valign="縦位置">〜</td> |
|||||||||
| このタグはテーブル内のテキストの位置を指定するものです。 横位置サンプル： left, center, right leftは左揃えです。 centerは中央揃えです。 rightは右揃えです。 縦位置サンプル： top, middle, bottom, baseline tophは上側です。 middleは中央です。 bottomは下側です。 baselineは各セル内１行目のデータベースラインを揃えます。 下記のように記述します。 記述例 <table border="1" width="200" height="200"> <caption>表示場所サンプル</caption> <tr> <th align="left" valign="top">●</th><th align="center" valign="top">●</th><th align="right" valign="top">●</th> </tr> <tr> <th align="left" valign="middle">●</th><th align="center" valign="middle">●</th><th align="right" valign="middle">●</th> </tr> <tr> <th align="left" valign="bottom">●</th><th align="center" valign="bottom">●</th><th align="right" valign="bottom">●</th> </tr> </table> 実際の表示
|
|||||||||
| ▲ページトップへ |
セル間隔とマージン指定<table cellspacing="セル間隔" cellpadding="セルマージン">〜</table> |
||||||||||||||||
| このタグはセルの間隔やセルのマージンを指定するものです。 cellspacingはテーブル枠とセルそしてセルとセルの間隔を指定します。 cellpaddingはセル枠とセル内テキスト等のマージンを指定します。 下記のように記述します。 記述例 <table border="1" cellspacing="0" cellpadding="0"> <caption>サンプル１</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> <table border="1" cellspacing="10" cellpadding="0"> <caption>サンプル２</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> <table border="1" cellspacing="0" cellpadding="10"> <caption>サンプル３</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> <table border="1" cellspacing="10" cellpadding="10"> <caption>サンプル４</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> 実際の表示
|
||||||||||||||||
| ▲ページトップへ |
テーブル色指定<table border bordercolor="色指定">〜</table> <table border bordercoloｒlight="色指定" bordercolordark="色指定">〜</table> |
||||||||
| このタグはテーブルの色を指定するものです。 bordercolorは枠の色を一色で指定します。 bordercolorlightは枠の色を左側と上側のみ指定します。 bordercolordarkは枠の色を右側と下側のみ指定します。 下記のように記述します。 記述例 <table border="10" border bordercolor="red"> <caption>サンプル１</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> <table border="10" border bordercolorlight="blue" bordercolordark="green"> <caption>サンプル２</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> 実際の表示
|
||||||||
| ▲ページトップへ |
テーブル表示指定<table frame="外枠表示方法" rules="内枠表示方法">〜</table> |
||||||||||||
| このタグはテーブルの外枠と内枠の表示方法を指定するものです。 外枠表示方法サンプル： void=外枠なし, above=上側のみ, below=下側のみ, hsides=上下のみ, vsides=左右のみ, lhs=左のみ, rhs=右のみ, box=外枠全て, border=四辺縁取り 内枠表示方法サンプル： none=内枠なし, groups=境界のみ, rows=横内枠のみ, cols=縦内枠のみ, all=全て 下記のように記述します。 記述例 <table border="5" frame="hsides" rules="rows"> <caption>サンプル１</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> <table border="5" frame="vsides" rules="cols"> <caption>サンプル２</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> <table border="5" frame="void" rules="none"> <caption>サンプル３</caption> <tr> <td>●</td><td>●</td> </tr> <tr> <td>●</td><td>●</td> </tr> </table> 実際の表示
|
||||||||||||
| ▲ページトップへ |
テーブル背景色と背景画像指定<table bgcolor="背景色">〜</table><tr bgcolor="背景色">〜</tr> <th bgcolor="背景色">〜</th> <td bgcolor="背景色">〜</td> <table background="背景画像">〜</table> <tr background="背景画像">〜</tr> <th background="背景画像">〜</th> <td background="背景画像">〜</td> |
||||
| このタグはテーブルの背景色や背景画像を指定するものです。 下記のように記述します。 記述例 <table border="1" cellpadding="10"> <caption>サンプル３</caption> <tr bgcolor="red"> <td>●</td><td>●</td> </tr> <tr> <td bgcolor="blue">●</td><td bgcolor="yellow">●</td> </tr> </table> 実際の表示
|
||||
| ▲ページトップへ |
テーブルセルの連結<tｈ rowspan="セル数">〜</ｔｈ> <td rowspan="セル数">〜</ｔd> <tｈ colspan="セル数">〜</ｔｈ> <td colspan="セル数">〜</ｔd> |
|||||||||||||
| このタグはテーブル内のセルを連結させる指定をするものです。 rowspanは縦方向にセルを連結するものです。 colspanは横方向にセルを連結するものです。 セル数とは連結させる数を指定します。 下記のように記述します。 記述例 <table border="1"> <caption>サンプル１</caption> <tr> <td colspan="3">●</td><td rowspan="3">●</td> </tr> <tr> <td>●</td><td>●</td><td>●</td> </tr> <tr> <td colspan="2">●</td><td rowspan="2">●</td> </tr> <tr> <td>●</td><td>●</td><td>●</td> </tr> </table> 実際の表示
|
|||||||||||||
| ▲ページトップへ | |||||||||||||
