网页设计与制作基础（HTML5+CSS3）课件 第6章 表格设计

第6章

表格设计

目录表格结构01表格属性02表格例子036.1.1表格标签<table></table>表示表格标签,里面描述表格的属性。<tr></tr>定义表格行。<td></td>定义单元格，单元格里面存放数据，这些数据可以是图片、文字、声音、视频等。<tablewidth="200px"border=”1"align=”center”>

<tr>

<td>姓名</td>

<td>星座</td>

</tr>

<tr>

<td>张三</td>

<td>双子座</td>

</tr><tr>

<td>李四</td>

<td>巨蟹座</td>

</tr></table>6.1表格结构6.1.2插入表格（1）在设计视图中，可以选择插入-Table，在弹出的Table对话框中，设置表格行数为3，列为2，表格宽度为200px，边框粗细为1，再点击确认，即建立了3行2列的表格，(2)插入表格后，在表格属性窗口中，设置表格对齐方式align:居中对齐，(3)在表格的空白行内，依次输入相应的内容(4)如果要设置表格的背景，可以直接在<table>标签内，设置bgcolor，例如<tablewidth="200"border="1"align="center"bgcolor="#abcedf">6.2表格属性6.2.1表格<table>属性表格<table>的常用属性包括以下部分：width：宽度height：高度align：水平对齐方式bgcolor：背景颜色border:边框粗细bordercolor:边框颜色cellspacing：单元格间距，即单元格和单元格之之间的距离cellpadding填充，单元格边距，即单元格里面的内容距离单元格边的值bordercolorlight:亮边框颜色（左上边框颜色）bordercolordark:暗边框颜色（右下边框颜色）6.2.2表格行<tr>属性表格行<tr>的属性只要包括：align：行内容的水平对齐valign：行内容的垂直对齐bgcolor：行的背景颜色bordercolor:行边框颜色bordercolorlight:行的亮边框颜色bordercolordark:行的暗边框颜色6.2.3单元格<td>属性单元格<td>的属性如下：width：单元格的宽度height：单元格的高度align：单元格内容的水平对齐valign：单元格内容的垂直对齐bgcolor：单元格的背景颜色bordercolor:单元格边框颜色bordercolorlight:单元格的亮边框颜色bordercolordark:单元格的暗边框颜色background:单元格的背景图像colspan：单元格跨列合并rowspan：单元格跨行合并6.3.1最新热曲榜页面例子（1）新建页面index.html,在页面中插入6行3列的表格，表格宽度自动，不设置具体的值，边框为1。插入表格后，在表格属性中设置对齐方式Align为“居中对齐”。6.3表格应用实例6.3.1表格应用实例（2）根据效果图，在单元格里面输入相应内容，并合并相应的单元格.（3）设置样式：.biaoti{ font-family:"楷体"; font-weight:bold; text-align:center; font-size:xx-large; color:#4324CD;}td{text-align:center;}6.3.1表格应用实例（4）设置表格只显示外边框的线，表格内部设置横向分隔线。可以使用表格的frame属性和rules属性<tableborder="1"align="center"frame="box"rules="rows">在本例中，将frame=“box”，只显示表格四条边框线，同时设置rules=”rows”,设置横向分隔线，隐藏竖向分隔线。Frame属性和rules属性取值下面的例子为某个公司的项目进度汇总情况表格以淡蓝色调为主，设置边框线和灰色字体，同时设置隔行的背景色，提高用户的阅读体验。6.3.2设计统计数据表格6.3.2设计统计数据表格（1）建立11行8列的表格，不设置表格宽度，在表格里面依次输入表头行<th></th>以及各行单元格内容：<table><tr><th>活动</th><th>计划开始</th><th>计划工期/天</th><th>实际开始</th><th>实际工期/天</th><th>完成百分比</th><th>审核人</th><th>执行人</th></tr>

<tr>…</tr>

…</table>6.3.2设计统计数据表格(2)设置表格的样式table{ table-layout:fixed;/*固定表格布局*/ empty-cells:show;/*显示空单元格*/ margin:0auto;/*居中对齐*/ border-collapse:collapse;/*合并边框*/ border:1pxsolid#cad9ea; color:#666; font-size:12px; }(3)设置th,td,tr的样式th{background-color:azure;height:30px;}td{height:20px;}td,th{border:1pxsolid#cad9ea;pading：01em0;} }tr:nth-child(odd){background-color:#f5fafe;/*设置奇数行背景颜色*/ }下面的例子展示了使用表格来制作个人主页面。使用表格布局页面的步骤如下：新建页面index.html,在页面中插入4行4列的表格，表格宽度为800，并设置居中对齐。合并第一行的4个单元格，输入内容“我的个人站点”。第二行的4个单元格分别输入导航栏内容。6.3.3表格综合布局6.3.3表格综合布局合并第三行的4个单元格，点击菜单插入--HTML--水平线，插入水平线<hr/>，并设置水平线的颜色为白色，高度为2。<hrsize="2"color=#FFFFFF/>合并第四行的4个单元格，插入一个3行2列表格，表格宽度为600，并设置居中。在第一个单元格里插入图片，在第二个单元格里输入相应文字内容；第二行合并单元格后，输入“推荐图片”；第3行合并单元格后，插入4幅图片。6.设置body的样式，定义背景图片、字体颜色为白色。body{background-image:url(img/bg.jpg);color:#ffffff;}6.3.3表格综合布局7.建立类.t1和.t2，用于设置两个表格的样式。.t1

{width：800px;border:solid#ffffff6px;background-color:#abcedf;margin:auto;

}.t2

{background-color:#ffffff;margin:auto;width:600px;}8.建立类.d1，用于设置导航栏单元格的样式.d1{font-family:"楷体_GB2312";font-size:18px;

text-align:center;width:25%;}6.3.3表格综合布局9.使用h1设置标题样式，定义.p1设置除导航栏外的文本样式。h1{font-family:"楷体_GB2312";font-size:46px;text-align:center;color:#FFF;}.p1{font-family:"楷体_GB2312";font-size:18px;color:#000;}6.3.3表格综合布局10.设置表格只显示外部边框线，不显示内部边框线。可设置frame=“box”，rules=“none”，完整代码为：<tableclass="t1"frame="box"rules="none">11.对最下方的四幅图片，使用<marquee></marquee>标记设置图片滚动效果。<marqueebehavior="scroll"direction="left"><imgsrc="img/p1.jpg"width="192"height="120"/><imgsrc="img/p3.jpg"width="192"height="120"/><imgsrc="img/p4.jpg"width="174"height="120"/><imgsrc="i