《Web前端开发项目教程》网页中表格的应用

项目08网页中表格元素的应用任务8-1网页中表格元素的应用

知识点掌握表格的基本用法和可选属性掌握控制表格的各种样式技能点学会使用合适的表格进行页面数据展示能够根据需要使用表格进行页面局部布局一、创建表格——创建表格的基本语法html中的表格由<table>标签来定义，每个表格均有若干行，行由<tr>标签定义，每行被分割为若干单元格，单元格由<td>标签定义。

td指表格数据（tabledata），即数据单元格的内容，可以包含文本、图片、列表、段落、表单、水平线、表格等多种元素。创建表格的基本语法格式如下：<table><tr>

<td>单元格内容</td> ...</tr>...</table><table></table>：用于定义一个表格。<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，在<table></table>中包含几对<tr></tr>，就表示该表格有几行。<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。一、创建表格——创建表格的基本语法<th>定义表格内的表头单元格。双标记，其内部的文本通常呈现为居中的粗体文本，而<td>元素内的文本通常是左对齐的普通文本。<caption></caption>标记为表格添加标题，<caption>标记必须紧随<table>之后，每个表格只能定义一个标题，居中显示于表格之上。<table><caption>学生名单</caption>

<tr>

<th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr>

<td>李四</td><td>女</td><td>19</td></tr></table>html中的默认表格并没有边框，只是将信息按照表格的行列来展示，表格的外观还需要由具体属性来定义。一、创建表格——表格的可选属性大多数HTML标记都有相应的属性，用于为元素提供更多的信息，但是在web标准下，我们更加倾向于结构和表现相分离，所以更多使用CSS样式设置页面元素的表现特征，标记属性用得少一些，对于<table><tr><td>等标记也不例外。但是有些表格属性可以快速改变表格的外观效果，在某些场合下使用效率比较高。一、创建表格——表格的可选属性（1）<table>标记的属性border属性：border属性用于设置表格的边框，默认值为0。如果border=1，表示表格边框的粗细为1个像素。cellspacing属性：cellspacing属性用于设置单元格之间的空白间距，默认为2px。border="1"cellspacing="0"一、创建表格——表格的可选属性（1）<table>标记的属性cellpadding属性：cellpadding属性用于设置单元格内容与单元格边框之间的空白间距，默认为1px。width与height属性：默认情况下，表格的宽度和高度靠其自身的内容来支撑，可以设置大小。align属性：用于定义表格的水平对齐方式，其可选属性值为left、center、right。不赞成使用，推荐使用样式margin:0auto;代替。bgcolor属性：用于设置表格的背景颜色。不赞成使用，推荐使用样式background-color代替。cellpadding="12"一、创建表格——表格的可选属性（2）<tr>标记的属性height：设置行高度，常用属性值为像素值。align：设置一行内容的水平对齐方式，常用属性值为left、center、right。valign：设置一行内容的垂直对齐方式，常用属性值为top、middle、bottom。bgcolor：设置行背景颜色，预定义的颜色值、十六进制#RGB、rgb(r,g,b)一、创建表格——表格的可选属性（2）<tr>标记的属性<tableborder="1"width="400"height="240"align="center"> <trheight="80"align="center"valign="middle"bgcolor="yellow"> <td>姓名</td><td>性别</td><td>电话</td><td>住址</td></tr><tr> <td>张三</td><td>女</td><td>lt;/td><td>北京</td></tr></table>通过<tr>的height属性设置了该行的高度，但是不能单独对某一行设置宽度，align属性设置了该行内容的水平对齐方式，valign属性设置了垂直对齐方式，bgcolor设置了该行的背景颜色。以上属性都可以使用相应的CSS样式所代替。一、创建表格——表格的可选属性（3）<td>标记width：设置单元格的宽度，常用属性值为像素值。height：设置单元格的高度，常用属性值为像素值。align：设置单元格内容的水平对齐方式，常用属性值为left、center、right。valign：设置单元格内容的垂直对齐方式，常用属性值为top、middle、bottom。bgcolor：设置单元格的背景颜色，常用属性值为预定义的颜色值、十六进制#RGB、rgb(r,g,b)。colspan：设置单元格横跨的列数（用于合并水平方向的单元格），常用属性值为正整数。rowspan：设置单元格竖跨的行数（用于合并竖直方向的单元格），常用属性值为正整数。与<tr>标记不同的是，可以对<td>标记应用width属性，用于指定单元格的宽度，同时<td>标记还拥有colspan和rowspan属性，用于对单元格进行合并。一、创建表格——表格的可选属性（3）<td>标记<tableborder="1"cellspacing="0"cellpadding="0"width="200">

<caption>个人简介</caption>

<trheight="50">

<td>姓名</td>

<tdwidth="60"></td>

<tdrowspan="3"width="100">照片</td>

</tr>

<trheight="50">

<td>年龄</td>

<td></td>

</tr>

<trheight="50">

<td>性别</td>

<td></td>

</tr>

<trheight="80">

<tdcolspan="3"align="left"valign="top">个人简介：</td>

</tr></table>照片所在单元格占据了三行，所以在该单元格第一次出现的时候设置rowspan=3，说明该单元格占据3行，后面两行中对应的该列的单元格<td>就可以删掉了。同样，最后一行占据了三列，只需对第一个单元格<td>标记应用colspan="3"，后面的两对<td></td>就不需要再写了。二、CSS控制表格样式——CSS控制表格边框样式表格的标记属性虽然用起来很方便，但是更多的时候我们倾向使用CSS样式来控制表格的外观，这样做也更加符合web标准，尤其是表格还有着它独有的样式属性，例如

border-collapse等。可以使用边框样式属性border为表格设置边框，但是要特别注意此时设置的只是表格元素整体的边框，单元格边框还需要单独设置。<styletype="text/css">

table{

width:280px;

height:160px;

border:1pxsolid; }</style>td,th{border:1pxsolid;}二、CSS控制表格样式——CSS控制表格边框样式如何去掉单元格之间的空白距离，制作细线边框效果？样式属性border-collapse设置表格的边框是否被合并为一个单一的边框，默认取值为separate，表示边框会被分开。取值为collapse时，表示表格边框会合并为单独的一条。<styletype="text/css">

table{

width:280px;

height:160px;

border:1pxsolid;

}</style>border-collapse:collapse;/*边框合并*/二、CSS控制表格样式——CSS控制单元格边距默认情况下，单元格的宽高是由单元格自身的内容来支撑的，通过对单元格设置内边距padding样式，同样可以调整单元格内容和边框之间的距离。<styletype="text/css"> table{

border:1pxsolid;

border-collapse:collapse;

}

th,td{

border:1pxsolid;

padding:20px30px;

}</style>二、CSS控制表格样式——CSS控制单元格边距需要注意的是，对单元格设置margin无效。表格还有一个独有的样式属性——border-spacing，可以方便地设置相邻单元格边框之间的距离，但是仅限于“边框分离”模式，即border-collapse取默认值separate时，否则将忽略这个属性。用法如下：border-spacing:length;该样式属性主要用于调整各个单元格之间的距离，在局部小范围页面排版中可以运用。table{

border-collapse:separate; border-spacing:50px40px;

}th,td{

border:1pxsolid; }二、CSS控制表格样式——CSS控制单元格边距需要注意的是，对单元格设置margin无效。表格还有一个独有的样式顺序性——border-spacing，可以方便地设置相邻单元格边框之间的距离，但是仅限于“边框分离”模式，即border-collapse取默认值separate时，否则将忽略这个属性。用法如下：border-spacing:length;该样式属性主要用于调整各个单元格之间的距离，在局部小范围页面排版中可以运用。table{

border-collapse:separate; border-spacing:50px40px;

}th,td{

border:1pxsolid; }二、CSS控制表格样式——CSS控制单元格宽高表格是一个整体结构，其单元格的宽度和高度都会互相影响，所以在设置<tr><td>等标记的宽高属性时要考虑整体和部分的关系。<styletype="text/css">table{

border-collapse:collapse;

border:1pxsolid#F00;

width:300px; }th,td{ border:1pxsolid; }.one{width:100px;height:60px;}.two{width:50px;} .three{height:100px;}</style><body>

<table>

<caption>学生名单</caption>

<tr>

<thclass="one">姓名</th>

<thclass="two">性别</th>

<thclass="three">年龄</th>

</tr>

<tr>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

…….

</table></body>二、CSS控制表格样式——CSS控制单元格宽高在给单元格设置宽度和高度时，对同一行中的单元格定义不同的高度，最终的高度将取其中的较大者，对同一列中的单元格定义不同的宽度时，也是如此。而且所有单元格的宽度之和也不能超出表格的整体宽度，一旦超出了将按比例重新分配各列的宽度。三、表格的应用——展示数据在网页中，表格主要为了呈现二维数据的，使用细线表格可以清晰地展示数据。例如新浪天气预报页面就是用表格将各地的天气信息展示出来。在该网页中，使用了单元格的合并属性，以及斑马底纹等样式。三、表格的应用——展示数据在网页中，表格主要为了呈现二维数据的，使用细线表格可以清晰地展示数据。例如新浪天气预报页面就是用表格将各地的天气信息展示出来。在该网页中，使用了单元格的合并属性，以及斑马底纹等样式。三、表格的应用——展示数据要点：使用rowspan、colspan属性规定了单元格如何合并°是可以替代摄氏度（°）符号的替代代码（详细见学习任务4-2）单元格中的图片直接使用行内标记<img>引入，图片的大小可以通过CSS样式修改。由于表格采用了斑马底纹样式，所以需要给部分<tr></tr>定义类，设置特殊的背景色。三、表格的应用——展示数据<styletype="text/css">

table{

border:0.5pxsolid#808080;border-collapse:collapse;margin:0auto;}

td{ border:0.5pxsolid#808080;width:140px; height:40px; font-family:"微软雅黑";font-size:14px;text-align:center;}tdimg{height:30px;vertical-align:middle;}

.grayrow{background:#eee;}</style><table>

<caption>济南市天气预报</caption>

<trclass="grayrow">

<tdrowspan="2">市</td>

<tdrowspan="2">县/区</td>

<tdcolspan="3">今天白天天气情况</td>

</tr>

<trclass="grayrow">

<td>天气情况</td>

<td>风力方向</td>

<td>最高温度</td>

</tr>

<tr>

<tdrowspan=“？">济南</td>

<td>济南</td>

<td><imgsrc="img/morecloudy.png">少云</td>

<td>西南偏西风</td>

<td>6°</td>

</tr>……..</table>三、表格的应用——页面布局由于表格有着结构稳定、横平竖直、对齐方便等特点，因此在早先的网页制作中经常使用表格进行页面布局。但是由于表格布局只适用形式单调、内容简单的网页，并且页面结构调整起来很不方便，所以现在很少使用，只是偶尔在网页的局部区域使用，利用表格的行列关系，在单元格中放置合适的内容，<table><tr><td>标记就已足够。例如在网上商城首页快捷入口部分，由于该部分内容正好三行两列，图片和文本在各自占据的区域内水平垂直居中对齐，所以可以使用表格布局。三、表格的应用——页面布局<divid="tool">

<table>

<tr>

<td><imgsrc="img/tool-1.png"><span>小米秒杀</span></td>

<td><img