[CSS]「table」要素の基本的な構成

<TABLE>はテーブル「表」を作るHTMLタグです。下記はテーブル「表」を作成する テーブルの基本構造です。

<table> 
  <tr>
   <td>セル1</td> 
   <td>セル2</td> 
  </tr> 
  <tr>
   <td>セル1</td> 
   <td>セル2</td> 
  </tr> 
</table> 

table要素：<table> ～ </table>

表を作成するには テーブルタグを、<table> ～ </table>で表します。表の外枠を示し、表の属性を設定することで表のサイズや線や色などの表現ができます。

tr要素：<tr> ～ </tr>

横一行を示すには、<tr> ～ </tr>タグを使います。

td要素：<td> ～ </td>

データセルを作成するには中に<td> ～ </td>タグを入れます。横に2つのセルを並べたい場合、tableの中にこの要素を2つ配置します。

<table border="1" width="300" height="100">
  <tr bgcolor="#ff33">
   <td>セル1</td> 
   <td>セル2</td> 
  </tr> 
  <tr>
   <td>セル1</td> 
   <td>セル2</td> 
  </tr> 
</table> 

<th>要素

「table header cell」の略で、<td>ど同様 <th>タグはセルを意味するタグです。

その違いは、</td>タグはデータを表すタグ示すのに対し、<th>タグは「見出し」を表すタグです。<th>～</th> で囲んだ部分は、文字が太字になり、中央に表示されます。

<table> 
  <tr>
   <th>セル1</th> 
   <th>セル2</th> 
  </tr> 
  <tr>
   <td>セル1</td> 
   <td>セル2</td> 
  </tr> 
</table> 

table属性