MAJIDEKA.COM－テーブル

　テーブルを作成するには、<table>、<tr>、<th>、<td>の各タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1"> <tr> <th>○△□</th><th>●▲■</th> </tr> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

テーブルの行をヘッダ・フッタ・ボディに分割するには

・<thead>、<tfoot>、<tbody>の各タグを使用してテーブルの行をヘッダ・フッタ・ボディに分割する方法

　テーブルの行をヘッダ・フッタ・ボディに分割するには、<thead>、<tfoot>、<tbody>の各タグを使用します。
　<thead>、<tfoot>、<tbody>の順で記述しますが、<thead>、<tbody>、<tfoot>の順で表示されます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1"> <thead> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> </thead> <tfoot> <tr> <td>まじでか</td><td>まじでよ</td> </tr> </tfoot> <tbody> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </tbody> </table>
　ブラウザにはこのように表示されます。

テーブル内で改行させないようにするには

・<th>タグや<td>タグにnowrap属性を指定する方法(<td nowrap>～</td>)

　テーブル内で改行させないようにするには、<td>タグにnowrap属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザを狭くしていって確認してください。
　　<table width="300" border="1"> <tr> <td nowrap>MAJIDEKA.COMではHTML作成講座を開いております。みなさん是非参考にしてください。</td> <td>MAJIDEKA.COMではHTML作成講座を開いております。みなさん是非参考にしてください。</td> </tr> </table>
　ブラウザにはこのように表示されます。

テーブル内のフォント・大きさ・色を一度に指定するには

・スタイルシートを使用してテーブル内のフォント・大きさ・色を一度に指定する方法

テーブル内のフォント・大きさ・色を一度に指定するには、スタイルシートを使用します。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルの空欄を綺麗に見せるには

・<br>タグまたは＆ｎｂｓｐ；を使用してテーブルの空欄を綺麗に見せる方法(<td><br></td>)

　テーブルの空欄を綺麗に見せるには、<br>タグまたは＆ｎｂｓｐ；を使用します。
　この場合＆ｎｂｓｐ；は全角で記述してますが、テキストエディタには半角で記述してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table> <tr> <td> <table border="1"> <tr> <td><br></td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>＆ｎｂｓｐ；</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </td> <td> <table border="1"> <tr> <td></td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td></td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルの横幅や高さを指定するには

・<table>タグにwidth属性、height属性を指定する方法(<table width="n" height="n">～</table>)

　テーブルの横幅や高さを指定するには、<table>タグにwidth属性、height属性を指定します。
　width="n"やheight="n"のnには数字を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" width="300" height="100"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

カラム(セル)を結合させるには

・<th>タグ、<td>タグにcolspan属性、rowspan属性を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<td colspan="n" rowspan="n">～</td>)

　カラム(セル)を結合させるには、<th>タグ、<td>タグにcolspan属性、rowspan属性を指定します。
　カラムを左右で結合させるならcolspanを、上下で結合させるならrowspanを指定します。
　colspan="n"やrowspan="n"のnには、結合するカラムの数を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1"> <tr> <td colspan="2">MAJIDEKA</td> </tr> <tr> <td rowspan="2">まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

カラムの内容を右寄せ・左寄せするには

・<tr>タグ、<th>タグ、<td>タグにalign属性を指定する方法(<td align="～">～</td>)

　カラムの内容を上寄せ・下寄せするには、<tr>タグ、<th>タグ、<td>タグにalign属性を指定します。
　valign="～"の～には、右寄せならrightを、左寄せならleftを記述します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" width="300"> <tr> <td align="right">MAJIDEKA</td><td align="right">MAJIDEYO</td> </tr> <tr> <td align="left">まじでか</td><td align="left">まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

カラムの内容を上寄せ・下寄せするには

・<tr>タグ、<th>タグ、<td>タグにvalign属性を指定する方法(<td valign="～">～</td>)

　カラムの内容を上寄せ・下寄せするには、<tr>タグ、<th>タグ、<td>タグにvalign属性を指定します。
　valign="～"の～には、上寄せならtopを、下寄せならbottomを記述します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" height="100"> <tr> <td valign="top">MAJIDEKA</td><td valign="top">MAJIDEYO</td> </tr> <tr> <td valign="bottom">まじでか</td><td valign="bottom">まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルの枠線の太さを指定するには

・<table>タグにborder属性を指定する方法(<table border="n">～</table>)

　テーブルの枠線の太さを指定するには、<table>タグにborder属性を指定します。
　border="n"のnには数字(0を含む)を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="2"> <tr> <th>○△□</th><th>●▲■</th> </tr> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

テーブルの枠線の線種を変更するには

・スタイルシートを使用してテーブルの枠線の線種を変更する方法

テーブルの枠線の線種を変更するには、スタイルシートを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>テーブルの枠線種変更</title> <style type="text/css">  </style> </head> <body> <table class="f"> <tr> <th>○△□</th><th>●▲■</th> </tr> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルの枠線の色を変更するには

・<table>タグにbordercolor属性を指定する方法(<table bordercolor="#XXXXXX">～</table>)

　テーブルの枠線の色を変更するには、<table>タグにbordercolor属性を指定します。
　また、Internet Explorerのみbordercolorlight属性、bordercolordark属性を指定できます。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table> <tr> <td> <table border="3" bordercolor="#ff0000"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </td> <td> <table border="3" bordercolorlight="#0000ff" bordercolordark="#ffff00"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </td> </tr> </table>
　ブラウザにはこのように表示されます。

テーブルに背景画像を指定するには

・<table>タグにbackground属性を指定する方法(<table background="xxx.gif">～</table>)

　テーブルに背景画像を指定するには、<table>タグにstyle属性のposition: absoluteを指定します。
　"xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" background="xxx.gif"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

・スタイルシートを使用してテーブルの背景色を変更する方法

テーブルに背景画像を指定するには、スタイルシートを使用します。
　url(xxx.gif)の()内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

テーブルの背景色を変更するには

・<table>タグにbgcolor属性を指定する方法(<table bgcolor="#XXXXXX">～</table>)

　テーブルの背景色を変更するには、<table>タグにstyle属性のposition: absoluteを指定します。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" bgcolor="#99ff99"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

・スタイルシートを使用してテーブルの背景色を変更する方法

テーブルの背景色を変更するには、スタイルシートを使用します。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルを半透明にするには

・<table>タグにstyle属性のfilter alpha();を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<table style="filter: alpha();">～</table>)

　テーブルを半透明にするには、<table>タグにstyle属性のposition: absoluteを指定します。
　alpha()の()内のopacityには透明度(1(透明)～100(不透明))を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" style="filter: alpha(opacity=30);"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

テーブルを並べるには

・<table>～</table>の間に<table>～</table>を記述する

　テーブルを並べるには、<table>～</table>の間に<table>～</table>を記述します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table> <tr> <td> <table border="1"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </td> <td> <table border="1"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> </td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルを指定した位置に表示するには

・<table>タグにstyle属性のposition: absoluteを指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　(<table style="position: absolute">～</table>)

　テーブルを指定した位置に表示するには、<table>タグにstyle属性のposition: absoluteを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1" style="position: absolute; top: 100px; left: 250px;"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table>
　ブラウザにはこのように表示されます。

ボタンクリックでテーブルを指定した位置に表示するには

・JavaScriptを使用してボタンクリックでテーブルを指定した位置に表示する方法

ボタンクリックでテーブルを指定した位置に表示するには、JavaScriptを使用します。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <table border="1" id="string1" style="position: absolute; visibility: hidden; top: 100px; left: 250px;"> <tr> <td>MAJIDEKA</td><td>MAJIDEYO</td> </tr> <tr> <td>まじでか</td><td>まじでよ</td> </tr> <tr> <td>マジデカ</td><td>マジデヨ</td> </tr> </table> <form> <input type="button" value="Click" onclick="klicken('string1')"> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルをソートするには

・JavaScriptを使用してテーブルをソートする方法

テーブルをソートするには、JavaScriptを使用します。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <table width="200" border="1" id="tb1"> <thead> <tr> <th><button onclick="SortTable('tb1', 0, 's')">メンバー</button></th> <th><button onclick="SortTable('tb1', 1, 'n')">背番号</button></th> </tr> </thead> <tbody> <tr> <td>Nakamura</td><td>10</td> </tr> <tr> <td>Nakata</td><td>7</td> </tr> <tr> <td>Nakazawa</td><td>22</td> </tr> <tr> <td>Miyamoto</td><td>5</td> </tr> <tr> <td>Kawaguchi</td><td>18</td> </tr> </tbody> </table>
　ブラウザにはこのように表示されます。

テーブルに文字を流すには

・<marquee>タグを使用してテーブルに文字を流す方法(<caption>～</caption>)

　テーブルに文字を流すには、<marquee>タグを使用します。
　direction="～"の""内には上に文字が流れるようにするにはupを、下に文字が流れるようにするにはdownを指定します。
　scrollamount="n"のnには文字の流れる速さ(数字)を指定してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table width="300" height="200" border="1" cellspacing="3" cellpadding="2"> <tr> <td align="center"> <marquee direction="up" scrollamount="2" width="280" height="180"> <center>MAJIDEKA.COMへようこそ！<br>ゆっくりご覧になっていってくださいね。</center> </center> </td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

テーブルにタイトルをつけるには

・<caption>タグを使用してテーブルにタイトルをつける方法(<caption>～</caption>)

　テーブルにタイトルをつけるには、<caption>タグを使用します。
　<caption>タグは<table>タグの直後に記述してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1"> <caption">TEAM MAJIDEKA</caption> <tr> <th>メンバー</th><th>背番号</th> </tr> <tr> <td>中村</td><td>10</td> </tr> <tr> <td>中田</td><td>7</td> </tr> <tr> <td>中澤</td><td>22</td> </tr> <tr> <td>宮本</td><td>5</td> </tr> <tr> <td>川口</td><td>18</td> </tr> </table>
　ブラウザにはこのように表示されます。

テーブルタイトルの位置を指定するには

・<caption>タグにalign属性を指定する方法(<caption align="～">～</caption>)

　テーブルタイトルの位置を指定するには、<caption>タグにalign属性を指定します。
　<caption>タグは<table>タグの直後に記述してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table border="1"> <caption align="bottom">TEAM MAJIDEKA</caption> <tr> <th>メンバー</th><th>背番号</th> </tr> <tr> <td>中村</td><td>10</td> </tr> <tr> <td>中田</td><td>7</td> </tr> <tr> <td>中澤</td><td>22</td> </tr> <tr> <td>宮本</td><td>5</td> </tr> <tr> <td>川口</td><td>18</td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.