网页基础开发教程 6_第1页
网页基础开发教程 6_第2页
网页基础开发教程 6_第3页
网页基础开发教程 6_第4页
网页基础开发教程 6_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目7制作员工信息表表格

掌握创建表格的HTML标记；

掌握合并单元格的方法；

掌握表格的CSS样式设置方法。任务描述知识准备任务实现任务小结任务测试与考核实训制作企业介绍页面1.HTML结构（1）创建一个7行11列的员工信息表；2.CSS样式（1）统一设置表格边框、内边距、字体大小等样式，使表格视觉一致，提升页面美观度。（2）表格边框设置：为表格添加1像素宽的黑色边框，合并表格边框，使表格更整洁；（3）表格居中显示：让表格在页面中水平居中；（4）表格内容对齐：使表格内所有内容水平居中；（5）表头样式：为表头设置1像素宽黑色边框，上下内边距5像素、左右20像素，字体大小18像素，背景色

rgb(47,140,206)，文字白色，增强可读性与视觉效果；（6）表格颜色规范：表格主要使用背景色

rgb(47,140,206)、白色和

#dfdfdf；（7）表格行交替背景：为表格主体奇数行设背景色

#dfdfdf，便于区分数据行；（8）单元格样式：为表格单元格设1像素宽黑色边框，上下内边距5像素、左右20像素，保证内容间距合适；图7-1员工信息表任务描述知识准备任务实现任务小结任务测试与考核实训表格标记合并单元格使用CSS定义表格样式知识准备1:表格标记1.简易表格标记HTML表格由<table>标记来定义。HTML表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，每行由<tr>标记定义，每行被分割为若干单元格，每格由<td>标记定义，表格可以包含标题行。表格相关标签与作用如下表：基本语法：标签作用<table></table>构建

HTML表格的容器；<tr></tr>tablerow的缩写，表示表格的一行。<td></td>tabledata的缩写，表示表格的数据单元格。<table><tr>

<td>单元格内的文字</td></tr></table>知识准备1:表格标记2.完整表格标记一个简单的表格只需包含<table>、<tr>、<td>这3种标记即可。如果要创建一个结构更完整、更复杂的HTML表格，还需要包含<caption>、<th>、<thead>、<tbody>等标记，如下图所示。知识准备1:表格标记2.完整表格标记（1）<caption></caption>。用于定义表格标题。一个表格只能有一个标题。默认情况下，表格标题位于整个表格的第一行。（2）<th></th>。用于定义表头单元格。要注意<th>标记和<td>标记的区别，<th>标记对内的文本通常会呈现为居中的粗体文本，<td>标记用于定义普通行的单元格，标记对内的文本通常是左对齐的普通文本。（3）<thead></thead>。用于定义表格的表头。（4）<tbody></tbody>。用于定义表格主体（正文）,这2个标记可以让表格结构更清晰，更具有可读性。实现复杂结构表格启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter07文件夹），新建HTML文件，命名为demo7-2.html。定义一个复杂结构表格，效果图如下：知识准备1:表格标记<tableborder="1"><caption>表格标题</caption><thead><tr><th>表头1</th>...</tr></thead><tbody><tr><td>第一行第一列单元格</td>...</tr>...</tbody></table>表格标记合并单元格使用CSS定义表格样式知识准备2:合并单元格合并单元格设计表格时，面对格式不规则的表格，可以通过合并单元格来进行调整格式，合并单元格可以给单元格标记<td>或<th>添加colspan或rowspan属性合并单元格。（1）列合并，即让同行不同列的单元格合并为一个单元格，需找到被合并的最左侧的单元格，添加colspan属性，语法格式如下，其中number为合并的单元格数目：如：<tdrowspan="number">内容</td>跨列合并跨行合并<tdrowspan="2">内容</td>知识准备2:合并单元格合并单元格（2）行合并，即让同列不同行的单元格合并为一个单元格，需找到被合并的最上面的单元格，添加rowspan属性，语法格式如下，其中number为合并的单元格数目：<tdcolspan="number">内容</td>合并表格单元格创建员工信息表，分别使用rowspan属性、colspan属性合并单元格，实现如下效果。知识准备2:合并单元格<throwspan="2"><!--行合并2个单元格-->

工号</th><thcolspan="3"><!--列合并3个单元格-->

个人信息</th><thcolspan="3"><!--列合并3个单元格-->

岗位信息</th>表格标记合并单元格使用CSS定义表格样式知识准备3:使用CSS定义表格样式常用的表格CSS样式属性使用CSS定义表格样式，可以让表格更佳美观、简洁。表格常用的CSS样式属性如下表。属性说明width设置表格的宽度，其值可以是像素值或者百分比height设置表格的高度，其值可以是像素值或者百分比text-align设置单元格中内容的水平对齐方式（默认左对齐，取值有left、center、right）vertical-align设置单元格中内容的垂直对齐方式（默认垂直居中，取值有top、middle、bottom）padding设置表格内容到表格边框之间的距离border设置表格的边框border-collapse设置表格的行和单元格的边框是否合并在一起（默认值

separate表示边框独立，collapse表示边框合并）border-spacing设置相邻单元格边框之间的距离empty-cells设置表格中的空白单元格是否显示边框和背景，仅当border-collapse为默认值时，该属性有效使用CSS修改表格样式在已实现的员工信息表的基础上，使用CSS样式修改表格，效果如下图所示。知识准备3:使用CSS定义表格样式table{border:1pxsolid#000;/*设置表格边框*/border-collapse:collapse;/*表格边框合并*/margin:0auto;text-align:center;}th,td{border:1pxsolid#000;/*设置表格边框*/}tr:first-child{background:#dedede;/*设置表格第一行的样式*/}...1.使用border-collapse属性使表格的行和单元格的边框合并，这样可以制作1px宽的细线边框表格。2.用类选择器进行定位后设置单元格样式。3.tr:first-child用于选取表格的第一行。任务描述知识准备任务实现任务小结任务测试与考核实训制作企业介绍页面1.HTML结构（1）创建一个7行11列的员工信息表；2.CSS样式（1）统一设置表格边框、内边距、字体大小等样式，使表格视觉一致，提升页面美观度。（2）表格边框设置：为表格添加1像素宽的黑色边框，合并表格边框，使表格更整洁；（3）表格居中显示：让表格在页面中水平居中；（4）表格内容对齐：使表格内所有内容水平居中；（5）表头样式：为表头设置1像素宽黑色边框，上下内边距5像素、左右20像素，字体大小18像素，背景色

rgb(47,140,206)，文字白色，增强可读性与视觉效果；（6）表格颜色规范：表格主要使用背景色

rgb(47,140,206)、白色和

#dfdfdf；（7）表格行交替背景：为表格主体奇数行设背景色

#dfdfdf，便于区分数据行；（8）单元格样式：为表格单元格设1像素宽黑色边框，上下内边距5像素、左右20像素，保证内容间距合适；任务描述图7-1员工信息表1.启动VSCode，打开“OpenFolder”对话框，选择本章代码文件夹（chapter07文件夹）。2.在目录chapter07下，新建一个名为Information

的文件夹。3.打开Information的文件夹，新建文件名为07-staff.html，打开该文件。任务实现1.创建项目在07-staff.html文件的<body></body>标签中继续输入表格信息代码：任务实现1：制作员工信息表2.搭建员工信息表网页结构<tableclass="stafftable"><thead><tr><th>工号</th><th>姓名</th><th>性别</th><th>民族</th><th>学历</th><th>年龄</th><th>部门</th><th>岗位</th><th>薪资</th><th>入职时间</th><th>操作</th></tr></thead><tbody><tr><td>20230101</td><td>李艳东</td><td>男</td><td>汉</td><td>本科</td><td>55</td><td>行政部</td><td>董事长</td><td>10000</td><td>2019-1-1</td><td><buttonclass="amend">修改</button><buttonclass="del">删除</button></td></tr>......在07-staff.html文件中，<head>与</head>标记之间输入如下代码：任务实现1:制作员工信息表3.搭建员工信息表css样式<style>table{border:1pxsolid#000;/*设置表格边框*/border-collapse:collapse;/*表格边框合并*/margin:0auto;text-align:center;}th{border:1pxsolid#000;padding:5px20px;font-size:18px;background-color:rgb(47,140,206);color:#ffffff;}tbodytr:nth-child(odd){/*odd为偶数行*/background-color:#dfdfdf;}td{border:1pxsolid#000;padding:5px20px;/*设置表格边框*/}

button{/*设置按钮的边框样式*/border:none;/*设置边框圆角的大小*/border-radius:5px;color:white;padding:5px10px;}.amend{background-color:#1165bf;}.del{background-color:#5c5c5c;}</style>

实现效果如下：任务实现1:制作员工信息表3.搭建员工信息表css样式任务描述知识准备任务实现任务小结任务测试与考核实训任务描述知识准备任务实现任务小结任务测试与考核实训一、单选题1.下面说法正确的是（）A.<table>是表格行标记B.<tr>是表格列标记C.<td>是表格行标记D.<th>是表头标记2.当同一行的三个单元格需要合并时要（）A.在最左边的单元格标记里添加rowspan=”3”B.在最左边的单元格标记里添加colspan=”3”C.在最上边的单元格标记里添加rowspan=”3”D.在最上边的单元格标记里添加colspan=”3”3.在HTML中，设置表格边框合并为一条实线的属性是（）A.borderB.border-sizeC.border-collapseD.border-spacing4.定义HTML表格的标记是（）A.<table>B.<tr>C.<td>D.<th>二、判断题1.在HTML中创建的表格在默认情况下是有边框（）2.在HTML中表格一行中的列数取决于定义一行中的单元格数（）3.colspan属性是用来合并行单元格的（）4.表头标记<td>可以使表头的单元格加粗且居中（）5.在CSS中border-collapse:col

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论