table表格一种早期十分流行的网页布局方式,现在基本都是div+css的布局方式,表格一般由tr(行)td(列)标签组成
表格的常用属性:1)border:表示表格边框线2)cellpadding:单元格内容和内边框之间的距离3)cellspacing:表示单元格之间的间距4)bgcolor:背景颜色5)width:宽度6)height:高度 等等
没有设置表格width与height属性,表格宽高暂时由单元格的内容的宽高决定,其他暂不考虑
想要消除单元格间距与内容与单元格内边框的间距设置属性cellspacing,cellpadding为"0"
Bash
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="10">
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
</tr>
<tr>
<td>C#</td>
<td>Asp.net</td>
<td>MVC</td>
</tr>
<tr>
<td>HTML</td>
<td>JavaScript</td>
<td>JQuery</td>
</tr>
</table>
</body>
</html>tr常用属性
align:单元格内容的水平对齐方式,属性值:1)left2左侧)right右侧3)center中间
valign:单元格内容的垂直对齐方式,属性值1)top上边2)bottom下边3)middle中间
rowspan与colspan:将单元格进行行与行或者列与列的合并
这些属性以后都会写在css样式表中;制作显示一个对齐方式与行或列的合并的表格
Bash
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
<tr>
<td colspan="3" align="center">课程表</td><!--合并三行-->
</tr>
<tr align="center"><!--单元格内容居中显示-->
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr align="center">
<td>HTML</td>
<td rowspan="2">.NET</td><!--合并两列-->
<td>JavaScript</td>
</tr>
<tr align="center">
<td>CSS</td>
<td>JQuery</td>
</tr>
</table>
</body>
</html>表格中设置的属性虽然会继承,但是子标签单独设置了属性,就会覆盖父标签的属性;比如tr
设置align="center",此tr中的子标签td单独设置了align="left",最终效果是此td内容居左显示
