Web程序设计基础2021秋--【表格标签-表格基本结构】【html5—表格高级样式的设置】

最新推荐文章于 2023-03-12 17:50:04 发布

牛小小小婷～

最新推荐文章于 2023-03-12 17:50:04 发布

阅读量3.5k

点赞数 3

分类专栏： # web 文章标签： html5 html

本文链接：https://blog.csdn.net/hannah2233/article/details/121605833

版权

web 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

一、表格标签-表格基本结构

第1关：网页表格的基本概念

1、定义表格的项目表头的HTML标签是（）。
D、<th>

2、下列选项中，用于设置表格背景颜色的属性是（）。

B、bgcolor

3、要使表格的行高为18px，以下方法中，正确的是（）

C、<tr height="18px">...</tr>
4、下列选项中，用于设置表格标题的标签是（）

D/ <caption>...</caption>

5、下列设置单元格中文本对齐方式的选项中，正确的是（）

B、
<th align="center" valign="middle">...</th>

第2关：创建简单的表格

编程要求：

根据提示，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

在之间创建一个表格，表格要求两行，每行都包含两个单元格，第一行的单元格是项目表头，第二行是数据单元格。
为表格添加如下图所示的背景图
表格背景
该图的URL为：https://www.educoder.net/api/attachments/1208912
表格的边框线设置为4px,总宽度200，每个单元格宽100

代码展示

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建表格</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <table width="200" border="4px" background="https://www.educoder.net/api/attachments/1208912">
    <caption>成绩表</caption>
        <tr>
            <th  width="100">姓名</th>
            <th  width="100">成绩</th>
        </tr>
        <tr>
            <td  width="100">张三</td>
            <td  width="100">90</td>
        </tr>
    </table>
  
   <!-- ********* End ********* -->
 </body> 
</html>

第3关：表格行样式的设置

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格第一行的样式，具体要求是：

该行的行高为40。
该行单元格内容的水平和垂直对齐方式都为居中，
该行的颜色代码设置为00ffff

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格行样式的设置</title>
</head>
<body>
    <table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
       <caption>成绩表</caption>
       <!-- ********* Begin ********* -->
        <tr height="40" align="center" valign="middle" bgcolor="00ffff">
       <!-- ********* End ********* -->
            <th width="100">姓名</td>
            <th width="100">成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
        </tr>
    </table>
    
</body>
</html>

第4关：表格中单元格样式的设置

编码要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格中单元格的样式，具体要求是：

该Begin1 - End1区域内添加table标签，设置表格边框线的粗细为4px，单元格之间的间隙为0，单元格内文本的内边距为8，表格总宽度200。
Begin2 - End2区域内添加两个数据单元格标签，第一个数据单元格标签中设置单元格的宽度为120，单元格内的文本为“张三”；第二个数据单元格标签中设置其文本的水平对齐方式为居中，单元格内的文本为“90”。

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格单元格样式的设置</title>
</head>
<body>
    <!-- ********* Begin1 ********* -->
    <table border="4px" cellspacing="0" cellpadding="8" width="200">
    <!-- ********* End1 ********* -->
       <caption>成绩表</caption>
        <tr height=40 align=center  valign=middle bgcolor=00ffff>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr bgcolor=00ff00>
            <!-- ********* Begin2 ********* -->
            <td width="120">张三</td>
            <td align="center" >90</td>
            
            <!-- ********* End 2********* -->
        </tr>
    </table>   
</body>
</html>

二、 html5—表格高级样式的设置

第1关：表格高级样式设置相关概念

1、下列选项中，用于设置表格内部边框线显示的属性是（）。
C、rules

2、如果希望表格的外部边框只显示上下两条边框线，属性frame的取值应选（）。

A、hsides

3、如果希望表格的内部边框只显示行线，则属性rules的取值应选（）。
B、rows

4、HTML中，若合并两个水平方向单元格，应使用的属性是（）。
C、rowspan

5、<table rules=cols>，表示（）
D、只显示列与列之间的分隔线

第2关：设置表格的外边框样式

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4
在table标签中添加frame属性，使得表格外边框显示为上下边框样式。

代码展示

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格外边框属性</title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   
   <table width="100" height="80" border="4" frame="hsides">
    <!-- ********* End ********* -->
    <caption>简易信息表</caption> 
    <tr align=center  valign=middle>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr  align=center  valign=middle>
      <td>张三</td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

第3关：设置表格的内边框样式

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4
在table标签中添加frame属性，使得表格外边框显示为上下边框样式。
在table标签中添加rules属性，使得表格内边框显示为行边框线样式。

代码展示

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格内边框属性</title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   
   <table width="100" height="80" border="4" rules="rows" frame="hsides">
    <!-- ********* End ********* -->
    <caption>简易信息表</caption> 
    <tr align=center  valign=middle>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr  align=center  valign=middle>
      <td>张三</td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

第4关：表格中单元格的合并

编程要求

根据任务描述的效果图，在 Begin-End 区域内补充代码，创建一个3行4列的签到表，具体要求如下：

“姓名”和“备注”单元格在垂直方向实现两个单元格合并
“签到”单元格在水平方向实现两个单元格合并
“姓名”“签到”“第1次”“第2次”“备注”单元格构成项目表头，请用项目表头单元格标签实现；第三行的单元格为数据单元格，请用数据单元格标签实现。

代码展示

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>签到表</title>
    <style type="text/css">
       th{background-color:#00ff33;}
       td{background-color:#00ffff;}
    </style>
 </head>
 <body> 
    <table border="2" width="400" bordercolor="#00ff00" cellpadding="6">
        <caption>签到表</caption>
      <!-- ********* Begin ********* -->
       
  <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">签到</th>
        <th rowspan="2">备注</th>
    </tr>
    <tr>
        <th>第1次</th>
        <th>第2次</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>    
      <!-- ********* End ********* -->
    </table>   
 </body>
</html>

第5关：表格的综合案例

编程要求

根据任务描述提示的目标效果，在右侧编辑器补充代码，创建一个题为“家庭账单”的表格，要求如下：

为整个网页添加下图所示背景图，其URL为https://www.educoder.net/api/attachments/1217848；
表格背景
表格边框为2px；表格宽度为600；bordercolor为#00ff00;cellpadding为6；表格在网页中居中排列；
表格标题为“家庭账单”；
单元格的背景等样式已在头部style标签中设置，各单元格的内容及合并要求请参看任务描述中的效果图，要注意绿色显示区的单元格要设置为项目表头，青色显示区的单元格要设置为数据单元格。

代码展示

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>表格综合</title>
    <style type="text/css">
       th{background-color:#00ff33;}
       td{background-color:#00ffff;text-align:center}
       caption{font-family:黑体;font-size:30px;color:blue}
    </style>
 </head>
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/1217848">
 <table border="2" width="600"  cellpadding="6"    bordercolor="#00ff00" align="center">
    <caption>家庭账单</caption>
    <tr>
        <th colspan="2" rowspan="2">本周项目</th>
        <th colspan="2">费用明细</th>
        <th rowspan="2">备注</th>
    </tr>
    <tr>
        <th>收入</th>
        <th>支出</th>
    </tr>
    <tr>
        <th rowspan="3">收入</th>
        <th>工资</th>
        <td>10000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <th>兼职</th>
        <td>2000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <th>收入合计</th>
        <td>12000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <th rowspan="3">支出</th>
        <th>生活用品</th>
        <td>0</td>
        <td>4000</td>
        <td></td>
    </tr>
    <tr>
        <th>学杂费</th>
        <td>0</td>
        <td>3000</td>
        <td></td>
    </tr>
    <tr>

        <th>支出合计</th>
        <td>0</td>
        <td>7000</td>
        <td></td>
    </tr>
</table>
 
</body> 
<!-- ********* End ********* -->
</html>

牛小小小婷～

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Web程序设计基础2021秋--【表格标签-表格基本结构】【html5—表格高级样式的设置】

文章目录一、表格标签-表格基本结构第1关：网页表格的基本概念第2关：创建简单的表格编程要求：代码展示第3关：表格行样式的设置编程要求代码展示第4关：表格中单元格样式的设置编码要求代码展示二、 html5—表格高级样式的设置第1关：表格高级样式设置相关概念第2关：设置表格的外边框样式编程要求代码展示第3关：设置表格的内边框样式编程要求代码展示第4关：表格中单元格的合并编程要求代码展示第5关：表格的综合案例编程要求代码展示一、表格标签-表格基本结构第1关：网页表格的基本概念1、定义表格的项目表头的HT
复制链接

扫一扫