第一個：
![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>產品介紹</title>
<style>
* {
margin: 0;
padding: 0;
}
table.main {
width: 80%;
margin: 10px auto;
border: 1px solid black;
border-collapse: collapse;
}
table.main td {
border: 1px solid black;
}
table.main tr.caption td.picture {
background: url(041.jpg) no-repeat center;
background-size: cover;
width: 200px;
}
table.main tr.caption td {
background-color: #ffffcf;
}
table.main tr.caption td table.caption-right {
padding: 20px;
}
table.main tr.caption td table.caption-right caption {
text-align: left;
margin-left: 10px;
font-size: 1.5em;
font-weight: 600;
color: #b05b29;
}
table.main tr.caption td table.caption-right tr td {
border: none;
color: #333029;
}
table.main tr.section {
background-color: #ffd9b4;
}
table.main tr.section td {
font-size: 1.3em;
font-weight: 500;
color: #a24211;
padding: 10px;
}
table.main tr.section-content td table tr th {
color: #929292;
letter-spacing: 1.1em;
}
table.main tr.section-content td table tr td {
border: none;
}
</style>
</head>
<body>
<table class="main">
<tr class="caption">
<td class="picture"><img src="041.jpg" alt=""></td>
<td>
<table class="caption-right">
<caption>產品名稱：佳能 IXUS 130</caption>
<tr>
<td> 佳能 IXUS 130 (官方標配)</td>
</tr>
<tr>
<td> 松下原裝SD卡2G (高速正品)</td>
</tr>
<tr>
<td> 佳能IXUS系列專用皮包</td>
</tr>
<tr>
<td> 索尼2.7英寸LCD保護貼(防刮/高透光/靜電吸附)</td>
</tr>
<tr>
<td> 攝影指南</td>
</tr>
</table>
</td>
</tr>
<tr class="section">
<td colspan="2">功能參數 </td>
</tr>
<tr class="section-content">
<td colspan="2">
<table>
<tr>
<th>音頻功能</th>
<td>: 支持音頻格式:MP3,WMA,WAV/內置麥克風,支持LINEIN尋錄/收音功能/內置喇叭 </td>
</tr>
<tr>
<th>錄音格式</th>
<td>: 44.1KHz, 128 Kbps, MP3, 支持MIC/LINE-IN直錄 </td>
</tr>
<tr>
<th>附加功能</th>
<td>: 支持圖片格式:JPEG(EXIF2.1)/電子書瀏覽/多語言(中/英)設置 </td>
</tr>
</table>
</td>
</tr>
<tr class="section">
<td colspan="2">其它參數 </td>
</tr>
<tr class="section-content">
<td colspan="2">
<table>
<tr>
<th>接口</th>
<td>: USB接口,AV OUT接口, AV IN接口 </td>
</tr>
<tr>
<th>擴展卡</th>
<td>: 可擴充2G SD,MMC卡 </td>
</tr>
<tr>
<th>電池</th>
<td>: 內置鋰電池 </td>
</tr>
<tr>
<th>尺寸</th>
<td>: 105.2 x47.6x15.6mm </td>
</tr>
<tr>
<th>重量</th>
<td>: 90g </td>
</tr>
</table>
</td>
</tr>
<tr class="section">
<td colspan="2">主要參數</td>
</tr>
<tr class="section-content">
<td colspan="2">
<table>
<tr>
<th>型號</th>
<td>: PMP 169B</td>
</tr>
<tr>
<th>內存容量</th>
<td>: 512M</td>
</tr>
<tr>
<th>屏幕尺寸</th>
<td>: 2.12英寸 (最佳視覺比例16：9的寬屏)</td>
</tr>
<tr>
<th>屏幕特性</th>
<td>: LTPS TFT (720x240) </td>
</tr>
<tr>
<th>視頻功能</th>
<td>: 支持ASF格式的MPG4,或通過軟件轉換成ASF播放,播放效果:320×420, 30fps/視頻輸出,輸入/電視節目定時錄製。</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
第二個：
![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言簿</title>
<style>
table {
border-collapse: collapse;
}
table tr {
background-color: cornsilk;
}
table tr th {
border: 1px solid #000;
text-align: center;
background-color: blanchedalmond;
}
table tr td {
border: 1px solid #000;
}
table tr td span {
color: red;
}
table tr.button {
text-align: center;
}
table tr.button input {
margin: 20px;
}
</style>
</head>
<body>
<form action="post">
<table>
<tr>
<th colspan="2">留言簿</th>
</tr>
<tr>
<td>您的姓名：</td>
<td><input type="name" required placeholder="帥哥/美女"><span>*</span></td>
</tr>
<tr>
<td>您的郵箱：</td>
<td><input type="email" name="email" id="email" required><span>*</span></td>
</tr>
<tr>
<td>您的網站：</td>
<td><input type="text" placeholder="http://"></td>
</tr>
<tr>
<td>其他聯繫方式</td>
<td><input type="text" required><span>*</span></td>
</tr>
<tr>
<td>留言內容：<br><span>(200字以內)</span></td>
<td><textarea name="textarea" id="textarea" cols="60" rows="5"></textarea></td>
</tr>
<tr>
<td>請選擇表情：</td>
<td>
<label for="face1"><img src="./face/face1.gif" alt=""></label><input type="radio" name="emotion" id="face1" checked>
<label for="face2"><img src="./face/face2.gif" alt=""></label><input type="radio" name="emotion" id="face2">
<label for="face3"><img src="./face/face3.gif" alt=""></label><input type="radio" name="emotion" id="face3">
<label for="face4"><img src="./face/face4.gif" alt=""></label><input type="radio" name="emotion" id="face4">
<label for="face5"><img src="./face/face5.gif" alt=""></label><input type="radio" name="emotion" id="face5">
<label for="face6"><img src="./face/face6.gif" alt=""></label><input type="radio" name="emotion" id="face6">
<label for="face7"><img src="./face/face7.gif" alt=""></label><input type="radio" name="emotion" id="face7">
<label for="face8"><img src="./face/face8.gif" alt=""></label><input type="radio" name="emotion" id="face8">
<label for="face9"><img src="./face/face9.gif" alt=""></label><input type="radio" name="emotion" id="face9">
<label for="face10"><img src="./face/face10.gif" alt=""></label><input type="radio" name="emotion" id="face10">
<br>
<label for="face11"><img src="./face/face11.gif" alt=""></label><input type="radio" name="emotion" id="face11">
<label for="face12"><img src="./face/face12.gif" alt=""></label><input type="radio" name="emotion" id="face12">
<label for="face13"><img src="./face/face13.gif" alt=""></label><input type="radio" name="emotion" id="face13">
<label for="face14"><img src="./face/face14.gif" alt=""></label><input type="radio" name="emotion" id="face14">
<label for="face15"><img src="./face/face15.gif" alt=""></label><input type="radio" name="emotion" id="face15">
<label for="face16"><img src="./face/face16.gif" alt=""></label><input type="radio" name="emotion" id="face16">
<label for="face17"><img src="./face/face17.gif" alt=""></label><input type="radio" name="emotion" id="face17">
<label for="face18"><img src="./face/face18.gif" alt=""></label><input type="radio" name="emotion" id="face18">
<label for="face19"><img src="./face/face19.gif" alt=""></label><input type="radio" name="emotion" id="face19">
<label for="face20"><img src="./face/face20.gif" alt=""></label><input type="radio" name="emotion" id="face20">
</td>
</tr>
<tr>
<td>請選擇頭像：</td>
<td>
<label for="Profilephoto1"><img src="./face/pic1.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto1" checked>
<label for="Profilephoto2"><img src="./face/pic2.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto2">
<label for="Profilephoto3"><img src="./face/pic3.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto3">
<label for="Profilephoto4"><img src="./face/pic4.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto4">
<label for="Profilephoto5"><img src="./face/pic5.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto5">
<br>
<label for="Profilephoto6"><img src="./face/pic6.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto6">
<label for="Profilephoto7"><img src="./face/pic7.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto7">
<label for="Profilephoto8"><img src="./face/pic8.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto8">
<label for="Profilephoto9"><img src="./face/pic9.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto9">
<label for="Profilephoto10"><img src="./face/pic10.gif" alt=""></label><input type="radio" name="Profilephoto" id="Profilephoto10">
</td>
</tr>
<tr class="button">
<td colspan="2"><input type="submit" value="提交留言"><input type="reset" value="重新填寫"></td>
</tr>
</table>
</form>
</body>
</html>
第三個
![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同城網在線調查</title>
<style>
table {
border: 2px solid orange;
border-collapse: collapse;
}
table tr th {
text-align: left;
background-color: orange;
}
table tr td {
border: 1px solid gray;
background-color: blanchedalmond;
}
table tr.submit td {
text-align: center;
}
table tr.submit td input {
margin: 15px;
width: 50px;
}
</style>
</head>
<body>
<form action="post">
<table>
<tr>
<th colspan="2">■同城網在線調查 </th>
</tr>
<tr>
<td>你從哪裏知道同城的</td>
<td><select name="" id="">
<option value="">網上搜索</option>
<option value="">朋友介紹</option>
<option value="">廣告宣傳</option>
<option value="">報刊雜誌</option>
<option value="">其他渠道</option>
</select></td>
</tr>
<tr>
<td>你正在使用的同城網服務</td>
<td>
<input type="radio" name="1"><label for="1">免費社區</label>
<input type="radio" name="1"><label for="2">免費留言簿</label>
<input type="radio" name="1"><label for="3">免費投票</label>
</td>
</tr>
<tr>
<td>你希望我們提供哪些新服務</td>
<td>
<input type="radio" name="2"><label for="11">聊天室</label>
<input type="radio" name="2"><label for="22">博客</label>
<input type="radio" name="2"><label for="33">遊戲系統</label>
</td>
</tr>
<tr>
<td>你是同城網的會員嗎</td>
<td>
<input type="radio" name="3"><label for="11">是</label>
<input type="radio" name="3"><label for="22">不是</label>
</td>
</tr>
<tr>
<td>你對同城網的其他意見 </td>
<td>
<textarea name="suggestions" id="suggestions" cols="30" rows="10"></textarea>
</td>
</tr>
<tr class="submit">
<td colspan="2"><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
