html表格合并单元格及参数属性详解

作者:IT技术 | 时间:2018-10-31

实际应用中的表格并不是一行一列显示的,有时候需要对表格做水平合并单元格或者垂直合并单元格,我们先讲解下html表格参数属性,然后通过代码实例讲解下html表格合并单元。

html表格参数属性

(1)td属性: 

width: 单元格宽度 

height: 单元格高度 

bgcolor: 背景颜色 

background: 背景图片 

align: 单元格的水平对齐方式 

valign: 单元格的垂直对齐方式(top/middle/bottom/baseline) 

rowspan: 行合并数目 

colspan: 列合并数目(特定长度的单元格,不会删除后面的单元格)

(2)tr属性: 

align right/left/center/justify/char 定义表格行的内容对齐方式。 

bgcolor rgb(x,x,x)/#xxxxxx/colorname 规定表格行的背景颜色。 

valign top/middle/bottom/baseline 规定表格行中内容的垂直对齐方式。

html表格合并单元格

(1)跨行合并单元格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案www.woyoudaan.cn</title> 
</head>
<body>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

html表格合并单元格及参数属性详解

(2)跨列合并单元格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案www.woyoudaan.cn</title> 
</head>
<body>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
</body>
</html>

html表格合并单元格及参数属性详解

通过上面的讲解,你掌握住了html表格参数属性和如何合并html表格单元格了吗