WEBデザイン授業11日目 - WEBデザインの学習法

テーブル

罫線を繋げて見せる

table{
border-collapse:collapse;
border-width:1px;
}
　　　　

セルとセルの間を空ける(セットで記述)

table{
border-collapse:separate;
border-spacing:1px;
}
　　　　

HTML

/*テーブルの練習*/
table#table3{
width: 500px;
border-collapse:collapse;/*罫線を繋げて見せる*/
border-spacing:5px;/*外枠を太く*/
border-width:5px;/*必須*/
border-style:solid;
border-color:#000000;
background-color:#FFFFFF;
}
table#table3 td{
background-color:#CCFF99;
border-width:1px;/*必須*/
border-style:solid;
border-color:#000000;
background-color:#FFFFFF;
}
#table3 td.width1{
width:200px;
empty-cells:hide;/*IE6では見えないので使用しない*/
}
#table3 th{
background:#FFFF66;
border-width:1px;/*必須*/
border-style:solid;
border-color:#000000;
}
#table3 caption{
caption-side:top;/*topが初期設定 bottomはIEでは効かない*/
text-align:left;
}

お問い合わせフォーム

<label> はフォームの中で、フォーム部品とラベルを関係付けるために使用します。

「label」はラジオボタンと「メール」に関連付けををさせます。メールの文字ををクリックした時でもラジオボタンにチェックできます。

<input name="contact" id="contact" type="radio"　value="メール" /><label for="contact">メール</label>
name属性（旧ブラウザ対応）とid属性の値は同じにします。

<form id="form2" name="form2" method="post" action="xxxxx.php">
<table cellpadding="0" cellspacing="0" width="884" border="1" summary="お問い合わせフォーム">
<caption>お問い合わせフォーム</caption>
<tr>
<th width="305">お問い合わせ内容</th>
<td width="573"><select name="subject" id="subject">
<option value="選択してください" selected="selected">選択してください</option>
<option value="予約について" selected="selected">予約について</option>
<option value="メニューについて" selected="selected">メニューについて</option>
</select></td>
</tr>
<tr>
<th><label for="name">お名前</label></th>
<td>
<input type="text" name="name" id="name" value="" size="20" /></td>
</tr>
<tr>
<th><label for="tel">電話番号</label></th>
<td>
<input type="text" name="tel" id="tel" value="" size="20" /></td>
</tr>
<tr>
<th><label for="mail">メールアドレス</label></th>
<td>
<input type="text" name="mail" id="mail" value="" size="20" /></td>
</tr>
<tr>
<th><label for="cibtact">ご連絡方法</label></th>
<td>
<input name="contact" type="radio" id="contact1" value="メール" /><label for="contact1">メール</label>
<input name="contact" type="radio" id="contact2" value="電話"/><label for="contact2">電話</label></td>
</tr>
<tr>
<th>当店を何でお知りになりましたか</th>
<td>
<input type="checkbox" name="magazine" id="magazine" value="雑誌" />
<label for="magazine">雑誌</label>
<input type="checkbox" name="web" id="web" value="ホームページ" />
<label for="web">ホームページ</label>
<input type="checkbox" name="friend" id="friend" value="友人・知人" />
<label for="friend">友人・知人</label>
<input type="checkbox" name="signboard" id="signboard" value="看板" />
<label for="signboard">看板</label>
<input type="checkbox" name="etc" id="etc" value="その他" />
<label for="etc">その他</label></td>
</tr>
<tr>
<th><label for="free">自由記入欄</label></th>
<td>
<textarea name="free" id="free" cols="25" rows="5"></textarea>
※ご予約の場合は、希望日時をご記入ください。</td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="送信" />
<input type="reset" name="Submit2" id="submit2" value="リセット" />
</form>