1.表格
表格,是指按所需的内容项日画成格子,用于显示数字和其他项以便快速引用和分析。跟office中的Excel有点相似。
2.表格结构
表格的用途用于布局(过时)。
用于显示批量的数据、报表等。
表格的特性
未固定宽度的空单元格默认平分表格宽度。
有内容的未固定宽度的单元格由内容表格的特性撑开
表格的最基本结构:
<body>
<table>
<tr>
<td>
</td>
</tr>
</table>
</body>
<table></table>用来定义表格<tr></tr>用来定义行
<td></td>用来定义单元格
注意:表格的最基本结构缺一不可
3.表格中常用的标签
(1)<tr>标签定义了HTML 中的行
<tr>标签包含了一个或者多个<th><td>标签
(2)<td>
<td>标签是定义HTM 表格中的标准单元格。标准的单元格可以包含文本,图片,列表,段落,表单,表格以及水平线等等。
<td>标签中的文本一般显示为正常的字体且左对齐
(3)<th>
定义表格内的表头单元格
<th>标签内部的文本通常会呈现为水平,垂直居中的粗体文本
<body>
<table>
<tr>
<th>嘿嘿嘿</th>
<td>嘿嘿嘿</td>
</tr>
</table>
</body>
效果:
HTML表格边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格:
效果:
改变边框的颜色:bordercolor="yellow”
1.<caption>
caption 用来设置表格的标题
caption 标签必须紧随着table 标签之后。只能对每个表格定义一个标题
通常这个标题会被居中于表格之上。
效果:
1.表格单元格边距:
(1)单元格中内容和边框之间的间距 cellpadding。
<table width="200"border="1”cellpadding=”10"cellspacing=“5”>
</table>
注意:table 表格是可以变动的,根据里面填充的内容
(2) 单元格间距和单元格之间的间距 cellspacing。<table width=”200" border="1” cellspacing="5”>
</table>
2.表格合并
(1)跨行合并:rowspan
(2)跨列合并:colspan
效果
3.文字对齐方式
(1)行水平对齐方式,针对的是内容做对齐:
<tr align="left”> 左对齐
align="right" 右对齐
align="center”居中对齐
(2)行垂直对齐方式:
valign<tr valign="top">上对齐
valign="middle"中间对齐
valign='bottom”底部对齐
4.改变边框的颜色:
bordercolor="yellow
<table width="200" border="5" bordercolor="green"></table>
表格背景颜色
<table width="200" border="5" bordercolor="green"></table>
bgcolor="green"></table><table width="200"border="5"
5.表格背景图像
<table border="1" width="400" height="200" background="img/l.jpg">
6.行背景
<tr bgcolor="red" height="60"></tr>