第7节 HTML表格 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/8 传媒学院.

Presentation on theme: "第7节 HTML表格 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/8 传媒学院."— Presentation transcript:

1 第7节 HTML表格 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/8 传媒学院

2 1、基本用法 HTML中的表格类似于word软件中的表格 表格主要通过3个标签来构成 显示数据更加清晰
<table>、<tr>、<td> table标签定义一个表格 tr标签被table标签包含，表示表格中的一行 有几对tr，就表示表格有几行 td标签被tr标签包含，表示一行中的一个单元格 也就是列 有几对td，就表示该行有几列 2019/4/8 传媒学院

3 <!--表格标记开始-->是注释
语法说明 <table><!--表格标签开始--> <tr><!--表格中一行，行标记开始--> <td>…</td><!—单元格标记，被其包含的内容就是表格中的一个单元格的内容，问题：这是第几行第几列？--> …<!—一行中有几个单元格标签，就表示该行有几列--> </tr><!—行标记结束--> <tr> <td>…</td> … </tr> …<!—表格中有几个行标签，就表示这个表格有几行--> </table><!--表格标签结束--> <!--表格标记开始-->是注释 2019/4/8 传媒学院

4 2、表格标题 对表格内容的简单说明，用<caption>标签实现，显示在表格正上方，语法：<caption>…</caption> 例子： <table> <caption>课程表</caption><!—放在表格里，第一行(第一个tr标签)的前面，紧跟table标记--> … </table> 2019/4/8 传媒学院

5 3、表格表头 指表格的第一行，文字样式为居中、加粗显示，通过<th>标签实现 例子 <table>
<caption>课程表</caption> <tr> <!--表格表头，表头也是表格的一行，所以用行标签tr，里面的单元格用th，而不是td--> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> … </table> 2019/4/8 传媒学院

6 4、表格修饰 4.1、表格的边框 语法 默认情况下表格边框为0（也就是没有边框）
<table border=” ” bordercolor=” ” bordercolorlight=” ” bordercolordark=” ”> border 边框粗细，用数字表示，1表示1px，即一个像素 bordercolor 边框颜色，用颜色英文或颜色码表示 bordercolorlight 左下边框颜色，即亮边框颜色 bordercolordark 右下边框颜色，即暗边框颜色 2019/4/8 传媒学院

7 4.2、表格的宽度和高度 语法 默认情况下，表格的宽度和高度会根据内容自动调整，也可以设置
内容是是指被td标签包含的内容 语法 <table width=” ” height=” ”> width 宽度，值为像素 height 高度，值为像素 2019/4/8 传媒学院

8 4.3、表格的背景颜色 语法 例子 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果
<table bgcolor=” ”> bgcolor取值为颜色英文或颜色码 例子 <table bgcolor=red> 表示该表格的背景颜色为红色 2019/4/8 传媒学院

9 4.4、表格的背景图像 语法 例子 默认是没有背景图像的 <table background=” ”>
<table background=test.jpg> 表示该表格的背景图片为网页所在目录下的test.jpg图片 如果代码为<table background=pic/test.jpg>呢？ 2019/4/8 传媒学院

10 4.5、表格的水平对齐 语法 在水平方向上，可以设置表格的对齐方式为：左对齐、居中、 右对齐 如果没特别进行设置，则默认为左对齐
在水平方向上，可以设置表格的对齐方式为：左对齐、居中、 右对齐 如果没特别进行设置，则默认为左对齐 语法 <table align=” ”> align的值可为left、center、right，分别对应左对齐，居中，右对齐 align属性可用于很多标签，在其他标签中，也是取这三个值 2019/4/8 传媒学院

11 5、行标签tr的属性 align valign bgcolor 行内容的水平对齐，默认左对齐 行内容的垂直对齐，默认居中
取值：top，center，bottom bgcolor 行的背景颜色 2019/4/8 传媒学院

12 <table border=1 width=400 height=200>
<caption>课程表</caption> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr bgcolor=green> <td>1-2</th> <td>语文</td> <td>数学</td> <td>英语</td> <td>历史</td> <td>地理</td> </table> 2019/4/8 传媒学院

13 6、单元格标签td的属性 align valign bgcolor width height rowspan colspan
单元格内容的水平对齐，默认左对齐 valign 单元格内容的垂直对齐，默认居中 bgcolor 单元格的背景颜色 width 单元格的高度 height rowspan 单元格跨行 colspan 单元格跨列 2019/4/8 传媒学院

14 <table border=1> <tr> <td>d201</td> <td width=100 align=center>张三</td> <td>传媒</td> </tr> <td height=50>d202</th> <td>李四</td> <td bgcolor=red>信息</td> </table> 给一个单元格添加width属性会影响同列的其他单元格，例如“张三”单元格 给一个单元格添加height属性会影响同行的其他单元格，例如“d202”单元格 2019/4/8 传媒学院

15 7、单元格的跨行属性 单元格的rowspan属性可实现单元格的跨行合并（纵向合并） 语法
<td rowspan=” ”>…</td> rowspan默认值为1，表示该单元格占一行 如果rowspan=2，则表示该单元格占两行（本行及下一行） 2019/4/8 传媒学院

16 <table border=1> <tr><!--第一行-->
例子 <table border=1> <tr><!--第一行--> <td>第1行第1个单元格</td> <td rowspan=2>第1行第2个单元格</td> </tr> <tr> <td>第2行第1个单元格</td> </table> 第1行的这个单元格占两行 这里应该有一个标签<td>…</td>，表示第2行的第2列，但因为第1行的第2个单元格定义了跨2行，会将其占据，所以不用写了，如果写则表示该行增加一个单元格（增加1列） 2019/4/8 传媒学院

17 8、单元格的跨列属性 colspan属性可以进行单元格的跨列合并（横向合并） 基本语法
<td colspan=“ ”>…</td> colspan默认值为1，表示该单元格占一列 如果colspan=2，则表示该单元格占两列（本列及该单元格的右边一列） 2019/4/8 传媒学院

18 <table border=1> <tr> <td>第1行第1个单元格</td>
例子 <table border=1> <tr> <td>第1行第1个单元格</td> <td>第1行第2个单元格</td> </tr> <td colspan=2>第2行第1个单元格</td> </table> 第2行的这个单元格占两列 这里应该有一个标签<td>…</td>，表示第2行的第2列，但因为第2行的第1个单元格定义了跨2列，会将其占据，所以不用写了，如果写则表示该行增加一个单元格（增加1列） 2019/4/8 传媒学院

19 9、表格嵌套 表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格
对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排 2019/4/8 传媒学院

20 <table border="1"> <tr><
<table border="1"> <tr><!--第1行--> <td>主表:1-1</td> <td>主表:1-2</td> </tr> <tr><!--第2行--> <td>主表:2-1</td> <td><!--第2行第2列里放了一个子表格，这就是表格嵌套--> <table border="1" bgcolor=red> <tr> <td>子表:1-1</td> <td>子表:1-2</td> <td>子表:2-1</td> <td>子表:2-2</td> </table> </td> 2019/4/8 传媒学院

21 作业1 制作一个简单的课表，如下 2019/4/8 传媒学院

22 作业2 制作一个如下的课表 2019/4/8 传媒学院