ソースファイルを開きます。ｔａｂｌｅ、ｔｒ、ｔｄタグを記述します。
<table> 〜 </table> … 〜の部分は表で表示され、罫線は表示しない。
る。<table border=1> 〜 </table>/font> … 〜の部分は表で表示され、幅１の罫線が入る。<td> 〜 </td> … 〜の部分は、行（横）方向に並んで表示される。| ブラウザでの表示 | ソースファイル | |||
＜ｔｄ＞ 〜 ＜/ｔｄ＞１個の表の表示例
|
＜ｔｄ＞ 〜 ＜/ｔｄ＞１個の表の表示例<br> <table border=1> <td>項目１の内容</td> </table> |
|||
＜ｔｄ＞ 〜 ＜/ｔｄ＞３個の表の表示例
|
＜ｔｄ＞ 〜 ＜/ｔｄ＞３個の表の表示例<br> <table border=1> <td>項目１の内容</td> <td>項目２の内容</td> <td>項目３の内容</td> </table> |
<table width="450"> 〜 </table> … 幅450の表が表示される<td align="left"> 〜 </td> … 表の中の文字が左に表示される<td align="center"> 〜 </td> … 表の中の文字が中央に表示される<td align="right"> 〜 </td> … 表の中の文字が右に表示される| ブラウザでの表示 | ソースファイル | |||
表の幅が４５０の表の表示例
|
表の幅が４５０の表の表示例<br> <table border="1" width="450"> <td>項目１の内容</td> <td>項目２の内容</td> <td>項目３の内容</td> </table> |
|||
文字が上、中央、下に表示された例
|
文字が上、中央、下に表示された例<br> <table border="1" width="450"> <td align="left">項目１の内容</td> <td align="center">項目２の内容</td> <td align="right">項目３の内容</td> </table> |
<table height="100"> 〜 </table> … 高さ１００の表が表示される<td valign="top"> 〜 </td> … 表の中の文字が上に表示される<td valign="bottom"> 〜 </td> … 表の中の文字が下に表示される| ブラウザでの表示 | ソースファイル | |||
表の高さが１００に表示された例
|
表の高さが１００に表示された例<br> <table border="1" height="100"> <td>項目１の内容</td> <td>項目２の内容</td> <td>項目３の内容</td> </table> |
|||
文字が上、中央、下に表示された例
|
文字が上、中央、下に表示された例<br> <table border="1" height="100"> <td valign="top">項目１の内容</td> <td>項目２の内容</td> <td valign="bottom">項目３の内容</td> </table> |
ソースファイルを上書き保存します。ブラウザで更新し、確認する。