1 常規表格

• table標簽 代表表格

• thead標簽 代表表頭 可以省略不寫

• tbody標簽 代表表體 可以省略不寫

• tfoot標簽 代表表尾 可以省略不寫

• tr標簽 代表一行

• td標簽 代表行內的一格

• th標簽 自帶加粗和居中效果的td

• 代碼

    <h3 style="text-align: center;">員工技能競賽評分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分數</th></tr><tr><td>1</td><td>張小明</td><td>100</td></tr><tr><td>2</td><td>李小東</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr></table>

• 效果
  

2 單元格跨行

• 通過td的rowspan屬性實現上下跨行

• 代碼

    <h3 style="text-align: center;">員工技能競賽評分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分數</th><th>備注</th></tr><tr><td>1</td><td>張小明</td><td>100</td><td rowspan="3">前三名升職加薪</td></tr><tr><td>2</td><td>李小東</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr></table>

• 效果
  

3 單元格跨行

• 通過td的colspan屬性實現左右的跨列

• 代碼

<h3 style="text-align: center;">員工技能競賽評分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分數</th><th>備注</th></tr><tr><td>1</td><td>張小明</td><td>100</td><td rowspan="6">前三名升職加薪</td></tr><tr><td>2</td><td>李小東</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr><tr><td>總人數</td><td colspan="2">2000</td></tr><tr><td>平均分</td><td colspan="2">90</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr></table>

• 效果