Web前端开发（HTML5+CSS3+JavaScript） 课件 第3章 3.3-表格

Web前端基础技术CSSJSHTML第3章3.3-表格Contents目录表格基本结构表格属性设置行、列属性行、列合并1.表格用途和结构作用：1.数据展示；2.页面布局：局部元素定位；整体界面布局组成：标题caption、表头thead、表体tbody和表尾tfoot。特点：表格的每一行都可以包含一个或多个单元格

，每一行单元格数相同单元格除了包含文本，也可以包含其他的HTML标记，例如图片、表单元素等。<tableborder="1"width="200px"><caption>学生信息表（标题）</caption><thead><tr><th>姓名</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody>表格完整的结构1.表头行：默认加粗、居中2.表体：0行以上注意：表格每行的单元格数是相同的<tfoot><tr><td>人数</td><td>2人</td></tr></tfoot></table>3.表尾：同表体重点关注：tabletrtd标记；常用简化结构的表格简化应用：可省略caption、thead、tbody和tfoot标记，默认为表格主体数据<tableborder="1"><tr><td>姓名</td><td>性别</td></tr><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr><tr><td>人数</td><td>2</td></tr></table>默认情况下，表格宽度由单元格内容决定2.表格主要属性1.表格边框:border

=“数字”（默认值为0即无边框）；边框颜色：bordercolor=“颜色值”2.表格在页面对齐：align=“left|center|right”3.统一设置单元格样式：内边距：cellpadding=“数字”单元格内容离四周间隔外边距：cellspacing=“数字”单元格与单元格之间的间隔4.宽度和高度：width=“数字|百分比”height=“数字|百分比”【百分比：相对父元素的对应值,当前相对页面宽度，注意：页面高度auto（由内容决定）】5.背景色bgcolor=“颜色值”背景图backgorund=“url”6.部分外边线：frame=“above|below|vsides|hsides|lhs|rhs|none边框线粗细取决border值如果使用frame，则表格外边框线由frame决定，粗细才由border决定7部分内边线：rules=“all|rows|cols”如果使用rules，则表格内边框线由rules决定，粗细固定为1px练习：表格在页面居中，其中，表格标题“课程表”使用标题2；个别单元格使用加粗字体，单元格外边距离为10px，内边距为10px，背景色为#ccc。如下图所示。1.制作标题和表头行；2.输入每一行对应的单元格数据；3.表格属性：border="1"align="center"cellpadding="10px“cellspacing="10px"bgcolor="#ccc"<tableborder="1"align="center"cellpadding="10px"cellspacing="10px"bgcolor="#ccc">

<caption>

<h2>课程表</h2></caption>

<!--表格头--><tr>

<th>时间</th>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th></tr>

<!--表格数据--><tr><td>1,2</td>

<td>大学英语</td>

<td><b>Web前端基础技术</b></td><td></td><td></td>

<td><b>Web前端基础技术</b></td></tr>

<tr><td>3,4</td>

<td>高等数学</td>

<td>英文写作</td>

<td>操作系统</td><td></td><td></td></tr></table>示例：修改课程表样式（细线表格，了解属性rules，只需在上例中修改table属性），如下图align="center"cellpadding="10px"rules="all"

内部边线（行、列边线，不包含外边框，cellspacing此时为0）frame="hsides"只包含外部水平线border="1"影响frame的粗细，如果没有frame，则包含表格外部边线3.行、单元格属性行tr属性属性说明align水平对齐方式，统一设置当前行所有单元格的内容水平对齐方式，取值为：left（默认）、center和right，分别代表左、居中和右对齐。valign垂直对齐方式，统一设置当前行所有单元格的内容垂直对齐方式，取值为：top、middle（默认值）和bottom，分别代表顶部、居中和底部对齐。height行高，单位为px（像素）width行宽，该属性无效，行的宽度是由表格的宽度或者单元格的宽度决定。bgcolor当前行的背景色，取值为颜色关键字或16进制数，如red、#ccc等。单元格td属性属性说明align水平对齐方式，当前单元格内容水平对齐方式，取值为：left（默认值）、center和right，分别代表左、居中和右对齐。valign垂直对齐方式，当前单元格内容垂直对齐方式，取值为：top、middle和bottom，分别代表顶部、居中和底部对齐。height：当前单元格的高度，单位为px或%。注意，如果要设置某行的高度，只要设置其中一个单元格（通常是该行第一个单元格）的高度即可。width当前单元格的宽度，单位为px或%。注意，如果要设置某列的宽度，只要设置其中一个单元格（通常首行的单元格）的宽度即可。bgcolor：当前单元格的背景色，取值为颜色关键字或16进制数，如red、#ccc等。示例：行、单元格属性使用<tableborder="1"><tralign="center"valign="middle"height="40px"bgcolor="#ccc"><tdwidth="200px">完全居中</td><tdwidth="100px">完全居中</td><tdwidth=100px">完全居中</td></tr><trheight="40px"><tdvalign="top">左顶部</td><tdvalign="middle"bgcolor="#ccc">左居中</td><tdvalign="bottom">左底部</td></tr><trheight="100px"><tdvalign="top"><imgsrc="huawei.jpg"width="50%"/><p>左顶部</p></td><tdalign="center"valign="middle"><imgsrc="huawei.jpg"width="50%"/><p>完全居中</p></td><tdalign="right"valign="bottom"><imgsrc="huawei.jpg"width="50%"/><p>右底部</p></td></tr></table>第1行：所有单元格内容水平、垂直居中；行高40px，背景色#ccc。第2行：依次顶部、中间和底部居中，左对齐；行高40px，第2个单元格背景色#ccc。第3行：高度100px；包含图片，依次左边、顶部居中；完全居中；底部右边居中；图片宽度为50%.此外，第1列宽度为200px,其他列宽度为100px。3.行列合并

colspan（相邻单元格列方向合并）rowspan（相邻单元格，行方向合并）---需要删除被合并的单元格<h3>素材表格</h3><tableborder="1"><!--第1行--><tr><td>1,1</td><td>1,2</td><td>1,3</td></tr><!--第2行--><tr><td>2,1</td><td>2,2</td><td>2,3</td></tr><!--第3行--><tr><td>3,1</td><td>3,2</td><td>3,3</td></tr></table><h3>列合并，合并第一行2，3列</h3><tableborder="1"><!--第1行--><tr><td>1,1</td><tdcolspan="2">1,2</td><!--<td>1,3</td>--></tr><!--第2行--><tr><td>2,1</td><td>2,2</td><td>2,3</td></tr><!--第3行--><tr><td>3,1</td><td>3,2</td><td>3,3</td></tr></table><h3>行合并，合并第2，3行3列</h3><tableborder="1"><!--第1行--><tr><td>1,1</td><tdcolspan="2">1,2</td><!--<td>1,3</td>--></tr><!--第2行--><tr><td>2,1</td><td>2,2</td><tdrowspan="2">2,3</td></tr><!--第3行--><tr><td>3,1</td><td>3,2</td><!--<td>3,3</td>--></tr></table>4.嵌套表格（了解）嵌套表格是指在一个表格的任意单元格中嵌入另外一个表格。嵌套表格主要用于实现复杂的页面布局（当前页面布局一般不再使用嵌套表格的方式），例如下图效果。单元格是内容的容器，这些内容包括文本、图片、段落等其他任意可以在body中元素，还可以嵌入另外一个表格的内容。综合实例：使用表格相关属性实现如下图效果。思路[重点]：确定最大的列数及其宽度，作为模版行,其他行参照该行进行相应的行列合并确定最大列数的行，设置宽度，作为模板行复制模板行，去掉宽度，再作为模板行，除了第一步的模板行，依次复制到每一行根据要求进行行列合并<tableborder="1"align="center"><!--模版行--><!--<tr><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td></tr>--><!--1.第1行--><trheight="60px"><tdcolspan="6"align="center"valign="middle">博览会申请表</td></tr><!--2.第2行--><tr><td>参会者姓名</td><tdcolspan="3"></td><!--<td></td><td></td>--><td>其他</td><td></td></tr>

<!--3.第3行--><tr><td>工作单位</td><tdcolspan="5"></td><!--<td></td><td></td>--><!--<td>其他</td><td></td>--></tr>

<!--标准行--><tr><tdwidth="120px">电话</td><tdwidth="120px"></td><tdwidth="120px">传真</td><tdwidth="120px"></td><tdwidth="120px">手机</td><tdwidth="120px"></td></tr><!--4.第4行--><tr><td>通信地址</td><tdcolspan="2"></td><!--<td></td>--><td>邮编</td><tdcolspan="2"></td><!--<td></td>--></tr><!--4.第4行--><tr><td>省份</td><tdcolspan="2"></td><!--<td></td>--><td>城市</td><tdcolspan="2"></td><!--<td></td>--></tr></table>练习；制作个人信息表<h3align="center">个人信息表</h3><tableborder="1"width="840px"align="center"rules="all"><!--1.确定表格中最大列数，制作模版行-->

<!--<tr><tdwidth="60px">姓名</td><tdwidth="100px"></td><tdwidth="60px">性别</td><tdwidth="60px"></td><tdwidth="60px">民族</td><tdwidth="60px"></td><tdwidth="100px">政治面貌</td><tdwidth="100px"></td><tdwidth="140px">照片</td></tr>-->​<!--复制模版行作为第1行--><tralign="center"valign="middle"><tdwidth="60px">姓名</td><tdwidth="100px"></td><tdwidth="60px">性别</td><tdwidth="60px"></td><tdwidth="60px">民族</td><tdwidth="60px"></td><tdwidth="100px">政治<br/>面貌</td><tdwidth="100px"></td><tdwidth="140px"rowspan="3">照片</td></tr><!--复制模版行作为第2行，去掉宽度设置--><tralign="center"><td>籍贯</td><td></td><tdcolspan="2">出生年月</td>

<!--<td></td>--><tdcolspan="2"></td>

<!--<tdwidth="60px"></td>--><td>参加工作<br/>时间</td><td></td>

<!--<td>照片</td>--></tr>

<!--复制模版行作为第3行，去掉宽度设置--><tralign="center"><td>身份证<br/>号码</td><tdcolspan="7"></td