任务3HTML5中的表格和列表(精)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
单位是像素数或者是占整个表格宽度的百分比 <th width="50%">姓名</th> <th width="30%">性别</th> <th width="20%">年龄</th>
<tr>
</tr>
• 单元格内容的对齐方式：align和valign属性
align：水平对齐方式，值为left、right或center
自动调整大小
• 对齐方式：align
属性值有left、right、和center三种，默认为left。
课堂练习
2. 设置表格格式
• 设置表格背景颜色：bgcolor属性
<table>、 <tr>、 <td>（或<;th>）中设置的背景颜色要优先于在
<tr>设置的背景颜色，而在<tr>中设置的背景颜色 优先于在<table>中设置的背景颜色。
colspan属性：表明该单元 格所占的列数
5.2 设置表格格式
课堂练习
练习一
练习2
高级表格标记
表格标题
表头（thead） 表体（tbody） 表尾（tfoot）
高级表格标记
练习
1 使用列表
• 有序列表：
• <ol>标记有两个基本 • type属性：设置列表
的编号类型 属性：type和start。
• <ul>标记的type属性:
设置列表项标志。
• type属性可以选择以
下几项之一：
circle：空心圆点
square：方块
disc：实心圆点
无序列表示例
课堂练习
小结
文档中的文字、段落进行格式化的常见标记
文字级的格式化标记包括：
字体标记<font> 字符格式化标记<b>、<i>、<u>、<sub>、<strong>等 特殊字符的表示法 块标记<p>、<div>、<span>、<address>、<pre>等 标题标记
• 在表格中插入图片：可放入某一个单元格内，
也可作为表格背景。
加背景图片：<table>标记中加入background属性
属性值是图片的URL地址。图片平铺在表格占 用的所有空间上。
在一个单元格中加入图片：在（<td>或<th>）之间
加入<img>标记
• 调整单元格大小：width属性
段落级的格式化标记包括：
换行标记<br>
包含在标记<ol>和</ol>内 列表项用<li>标记来定义：
<ol> <li>第1项</li> <li>第2项</li> …… <li>第n项</li> </ol>
有序列表示例
2 使用列表
• 无序列表：
包含在标记<ul>和</ul>内 没有指定顺序，每一项用某 种类型的标志（如实心圆、 空心圆圈等）表示。 <ul> <li>第1项</li> <li>第2项</li> …… <li>第n项</li> </ul>
valign：垂直对齐方式，值为baseline、top、middle
或bottom。 在默认情况下对齐方式是（left和middle） 标题单元格（用<th>标记标识的单元格）对齐方式 为（center和middle）
• 设置单元格间距和边距
cellspacing属性：设置相邻单元格之间的间距
• 添加标题：caption标记
“align”属性：指定表格的标题位置
放在表格上端（top），下端（bottom）
其默认值是“top”
<caption align=" bottom " >人员统计</caption>
• 调整表格尺寸
width（宽度）和height（高度）属性
如果没有为表格设置具体的尺寸，表格将根据需要
项目1
任务3 实现向网页中添加表格和列表
HTML表格
行 列
在 html 文档中，广泛使用表格存放网页上的文本和图像
1. 创建表格
• 基本表格标记：<table>和</table>
任何一个表格都由<table>标记开始，由</table>标记结尾 <body> <table> 表格内容 </table> </body>
cellpadding属性：设置单元格的边框和单元格中内
容之间的距离
<table border="5" bordercolor="purple" cellspacing="12" cellpadding="10" width="80%">
• 扩展行和列
rowspan属性：表明该单元
格要占用的行数
1. 创建表格
• 设置表格行：<tr>和</tr>
<table>和</table>之间可以包含任意多个<tr>标记
<table>
<tr> 行内容 </tr> </table>
• 设置表格列：<th>和</th>
<td>和</td>
<th>是 table head的简称，用来设置表头。 <td>是 table data的简称，用来标记表头以外的其他单元格。 <table border="1" width="90%"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>罗昌</td> <td>26</td> </tr> </table>