第七章 HTML 表格

发布于:2024-05-13 ⋅ 阅读:(106) ⋅ 点赞:(0)

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>