テーブルの練習

HTML CSS


テーブル1のHTML

<p>テーブル1</p>
<table id="table1">
 <tr>
   <td class="width1">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td class="width2">&nbsp;</td>
 </tr>
 <tr>
   <td class="width3">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
 </tr>
</table>

テーブル1のCSS

table#table1 {
	table-layout: auto;
	width: 500px;	
}
td {
	background-color: #999999;
}

td.width1 {
	width: 100px;
	background-color: #ff0000;
}

td.width2 {
	width: 100px;
	background-color: #ffff00;
}

td.width3 {
	width: 200px;
	background-color: #00ffff;
}
  • 「＆ｎｂｓｐ；（本当は半角で入力です）」（ctrl+shift+スペース）は、半角スペースの意味。この入力をしないと、テーブルのセルにおいて、文字がないとブラウザに認識されてしまう為に、レイアウトが崩れる可能性が出てくる。また、改行されないスペースと言うことも覚えておく。
  • テーブルは、エクセルデータをそのまま、Dremeaverにもってくることが可能。（エクセルの表を選択→コピー→Dremeaverにコピー→余計なタブなどを削除する）この時、どれが必要なタブで、どれが必要でないかと言う見極めが大事。