表格标签-表格基本结构

最新推荐文章于 2024-09-27 20:47:03 发布

静待花开︳

最新推荐文章于 2024-09-27 20:47:03 发布

阅读量369

点赞数

分类专栏： educoder Web前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121607144

版权

educoder 同时被 2 个专栏收录

51 篇文章 10 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

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

DBCDB

第2关：创建简单的表格

任务描述

本关任务：创建一个两行两列的表格。

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.在<body></body>之间创建一个表格，表格要求两行，每行都包含两个单元格，第一行的单元格是项目表头，第二行是数据单元格。 2.为表格添加如下图所示的背景图

表格背景

该图的URL为：https://www.educoder.net/api/attachments/1208912 3.表格的边框线设置为4px,总宽度200，每个单元格宽100 实现的效果图如下：

表格效果2

测试说明

补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。

越努力越幸运，祝你成功！

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

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

任务描述

本关任务：编写一个两行两列的表格网页，表格中的行样式进行设置。效果如下图所示：

表格效果2

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格第一行的样式，具体要求是： 1.该行的行高为40。 2.该行单元格内容的水平和垂直对齐方式都为居中， 3.该行的颜色代码设置为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"bgcolor="00ffff"valign="middle">
       <!-- ********* End ********* -->
            <th width="100">姓名</td>
            <th width="100">成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
        </tr>
    </table>
    
</body>
</html>

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

任务描述

本关任务：编写一个两行两列的表格网页，表格中的单元格样式进行设置。效果如下图所示：

表格效果3

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格中单元格的样式，具体要求是： 1.该Begin1 - End1区域内添加table标签，设置表格边框线的粗细为4px，单元格之间的间隙为0，单元格内文本的内边距为8，表格总宽度200。 2.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>