Educoder/头歌JAVA——HTML：表格

已于 2022-12-16 17:27:15 修改
阅读量3.6k 收藏 32
点赞数 5
文章标签： html 前端 java
于 2022-12-10 10:10:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou2622/article/details/128261957
版权

目录

第1关：表格的基本构成

相关知识

第2关：表格的属性——宽、高

相关知识

 第3关：表格的属性——cellpadding

相关知识

 第4关：表格的属性——cellspacing

相关知识

 第5关：表格的标题

相关知识

第6关：表格—— 标签的 rowspan 属性

相关知识

第7关：表格——标签的colspan属性

相关知识

 第8关：表格的综合案例

相关知识

任务描述

第1关：表格的基本构成

相关知识

大家都知道，表格由行和列组成，这里我们就用HTML标签写一个表格。

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。这里先创建一个两行两列的表格。代码如下：

  1. <table border="2">
  2. <tr>
  3. <td>姓名</td>
  4. <td>年龄</td>
  5. </tr>
  6. <tr>
  7. <td>张三</td>
  8. <td>18</td>
  9. </tr>
  10. </table>

效果如下：

 上面border属性表示给表格添加边框，它的值2表示边框的宽度为2px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

<table border="5">

    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
    </tr>
</table>

    <!-- ********* End ********* -->
</body>
</html>

第2关：表格的属性——宽、高

相关知识

你可以使用width和height来定义表格的宽和高，使表格更大方、美观。

例子如下：

  1. <table border="2" width="200" height="100">
  2. <tr>
  3. <td>姓名</td>
  4. <td>年龄</td>
  5. </tr>
  6. <tr>
  7. <td>张三</td>
  8. <td>18</td>
  9. </tr>
  10. </table>

效果如下：

需要注意的是：这里的width和hegiht单位是px，可加可不加。

这里width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。例子如下：

  1. <table width="60%" height="200px">
  2. ...
  3. </table

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

<table border="1" width="100%" height="200">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
    </tr>

</table>
        
    <!-- ********* End ********* -->
</body>
</html>

 第3关：表格的属性——cellpadding

相关知识

第二关虽然设置了宽、高，可是内容是紧挨着边框的，怎么使表格的内容和边框有间距呢？

这里用到了表格的另一个属性cellpadding，它规定了单元边沿与其内容之间的空白。

这里用图来说明，如图所示：

灰色部分表示cellpadding，它的值表示灰色部分的宽度。

例子如下：

  1. <table border="2" cellpadding="20">
  2. <tr>
  3. <td>姓名</td>
  4. <td>年龄</td>
  5. </tr>
  6. <tr>
  7. <td>张三</td>
  8. <td>18</td>
  9. </tr>
  10. </table>

效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

<table border="2" cellpadding="6">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
    </tr>

</table>

    <!-- ********* End ********* -->
</body>
</html>

 第4关：表格的属性——cellspacing

相关知识

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这里用到了表格的另一个属性cellspacing，它规定了单元格之间的空间。

这里用图来说明，如图所示：

双箭头的大小表示cellspacing属性的值。

只需把cellspacing的值设为0就可以实现上面的效果。

代码如下：

  1. <table border="2" cellspacing="0" cellpadding="10">
  2. <tr>
  3. <td>姓名</td>
  4. <td>年龄</td>
  5. </tr>
  6. <tr>
  7. <td>张三</td>
  8. <td>18</td>
  9. </tr>
  10. </table>

效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
    </tr>

</table> 

    <!-- ********* End ********* -->
</body>
</html>

 第5关：表格的标题

相关知识

表格一般都有标题来说明这个表格具体是做什么的。

你可以用<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。

例子如下：

  1. <table border="2" cellspacing="0" cellpadding="10">
  2. <caption>班级成绩</caption>
  3. <tr>
  4. <td>姓名</td>
  5. <td>年龄</td>
  6. </tr>
  7. <tr>
  8. <td>张三</td>
  9. <td>18</td>
  10. </tr>
  11. </table>

效果如下：

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <!-- ********* Begin ********* -->

        <caption>科目成绩</caption>

        <!-- ********* End ********* -->
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
       </tr>

    </table>
</body>
</html>

第6关：表格——<td> 标签的 rowspan 属性

相关知识

先看一个例子。如下所示：

  1. <table border="2" cellspacing="0" width="200">
  2. <tr>
  3. <td>科目</td>
  4. <td>语文</td>
  5. <td>80</td>
  6. </tr>
  7. <tr>
  8. <td>科目</td>
  9. <td>数学</td>
  10. <td>70</td>
  11. </tr>
  12. <tr>
  13. <td>科目</td>
  14. <td>英语</td>
  15. <td>75</td>
  16. </tr>
  17. </table>

效果如下：

很明显，科目是包括语文、数学、英语的，这个在表格中怎么表示呢？

你可以用<td>标签的rowspan属性来实现，它规定了单元格可横跨的行数。

代码如下：

  1. <table border="2" cellspacing="0" width="200" >
  2. <tr>
  3. <td rowspan="3">科目</td>
  4. <td>语文 </td>
  5. <td>80</td>
  6. </tr>
  7. <tr>
  8. <td>数学</td>
  9. <td>70</td>
  10. </tr>
  11. <tr>
  12. <td>英语</td>
  13. <td>75</td>
  14. </tr>
  15. </table>

效果如下：

 这里分析一下代码，第一行第一列的 <td rowspan="3">科目</td>表示科目横跨了3行，所以第二行和第三行的第一列就不写了，第二列和第三列不变。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
        <tr>
            <td>商品</td>
            <td>数量</td>
            <td>单价</td>
            <td>备注</td>
        </tr>

        <tr>
            <td>短袖</td>
            <td>70</td>
            <td>30</td>
            <td rowspan="2">无</td>
        </tr>

        <tr>
            <td>裤子</td>
            <td>50</td>
             <td>30</td>
        </tr>

    <!-- ********* End ********* -->
    </table>
</body>
</html>

第7关：表格——<td>标签的colspan属性

相关知识

先看一个例子。如下所示：

  1. <table border="2" cellspacing="0" width="200">
  2. <tr>
  3. <td>科目</td>
  4. <td>科目</td>
  5. <td>科目</td>
  6. </tr>
  7. <tr>
  8. <td>语文</td>
  9. <td>数学</td>
  10. <td>英语</td>
  11. </tr>
  12. <tr>
  13. <td>70</td>
  14. <td>80</td>
  15. <td>75</td>
  16. </tr>
  17. </table>

效果如下：

很明显，科目是包括语文、数学、英语的，这个在表格中怎么表示呢？

你可以用<td>标签的colspan属性来实现，它规定了单元格可横跨的列数。

代码如下：

  1. <table border="2" cellspacing="0" width="200">
  2. <tr>
  3. <td colspan="3">科目 </td>
  4. </tr>
  5. <tr>
  6. <td>语文</td>
  7. <td>数学</td>
  8. <td>英语</td>
  9. </tr>
  10. <tr>
  11. <td>70</td>
  12. <td>80</td>
  13. <td>75</td>
  14. </tr>
  15. </table>

效果如下：

 这里分析一下代码，第一行第一列的 <td colspan="3">科目</td>表示科目横跨了3列，所以第二列和第三列就不写了，其他的不变。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
        <tr>
            <td>商品</td>
            <td>数量</td>
            <td>单价</td>
        </tr>

        <tr>
            <td>短袖</td>
            <td>70</td>
            <td>30</td>
        </tr>

        <tr>
            <td>裤子</td>
            <td>50</td>
            <td>30</td>
        </tr>

        <tr>
            <td>合计</td>
            <td colspan="2">3600</td>  <!--合并-->
        </tr>
    <!-- ********* End ********* -->
    </table>
</body>
</html>

 第8关：表格的综合案例

相关知识

这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。

这里介绍一个控制表格内文本方向的属性，本来表格有自带的属性align也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。

不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下是很明显的。这里因为 表格默认的文本方向是向左。

现在让文本居中，例子如下：

  1. <style>
  2. table{
  3. text-align: center;
  4. }
  5. </style>
  7. <table border="2" cellspacing="0" width="300">
  8. <tr>
  9. <td>姓名</td>
  10. <td>年龄</td>
  11. </tr>
  12. <tr>
  13. <td>张三</td>
  14. <td>18</td>
  15. </tr>
  16. </table>

效果图如下：

这样是不是效果要好一些。下面介绍一个这个属性。

text-align属性有下面的几个值：

  • left：左对齐；

  • center：居中对齐；

  • right：右对齐；

  • justify：两端对齐。

任务描述

本关任务：按照以下要求，完成一个复杂的表格创建任务。

创建表格的要求如下：

  • 边框为2px；

  • 宽为100%；

  • cellspacing为0；

  • cellpadding为6；

  • 标题内容为本周财政计划；

  • 在 <style> 标签里设置文本为居中对齐。

其它内容和效果图展示的一样。

注意：表格属性的顺序按照创建表格的要求的顺序来写。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
       text-align: center;
    }
    </style>
    <!--设置表格-->
    <table border="2" width="100%" cellspacing="0" cellpadding="6">
        <caption>本周财政计划</caption>
        <tr>
            <td rowspan="2" colspan="2">项目</td>
            <td colspan="2">本周发生</td>
            <td rowspan="2">备注</td>
        </tr>

        <tr>
            <td>收入</td>
            <td>支出</td>
        </tr>

        <tr>
             <td rowspan="3">收入</td>
             <td>贷款收回</td>
             <td>8700</td>
             <td>0</td>
             <td></td>
        </tr>

        <tr>
             <td>内部转款</td>
             <td>6000</td>
             <td>0</td>
             <td></td>
        </tr>

        <tr>
             <td>收入合计</td>
             <td>14700</td>
             <td>0</td>
             <td></td>
        </tr>

        <tr>
             <td rowspan="3">支出</td>
             <td>采购支出</td>
             <td>0</td>
             <td>5000</td>
             <td></td>
        </tr>

        <tr>
             <td>工资支出</td>
             <td>0</td>
             <td>7000</td>
             <td></td>
        </tr>

        <tr>
             <td>支出合计</td>
             <td>0</td>
             <td>12000</td>
             <td></td>
        </tr>

      </table>
    <!-- ********* End ********* -->
</body>
</html>
陆小玖
关注
  • 5
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【EduCoder答案】HTML——表格
weixin_44505587的博客
08-26 456
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有 HTML——表格 >>>查看 第1关:表格的基本构成 第2关:表格的属性——宽、高 第3关:表格的属性——cellpadding 第4关:表格的属性——cellspacing 第5关:表格的标题 第6关:表格—— 标签的 rowspan 属性 第7关:表格——标签的colspan属性 第8关:表格的综合案例 [外链图片转存中…(img-qPNY
【EduCoder答案】HTML——表格※
weixin_44505587的博客
08-24 1125
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有 HTML——表格 ※ >>>查看 第1关:表格的基本构成 第2关:表格的属性——宽、高 第3关:表格的属性——cellpadding 第4关:表格的属性——cellspacing 第5关:表格的标题 第6关:表格—— 标签的 rowspan 属性 第7关:表格——标签的colspan属性 第8关:表格的综合案例※ ...
HTML--表格
qq_45823118的博客
03-17 1356
1.表格的标题 任务描述 本关任务：添加一个表格标题，内容为科目成绩。 实现的效果如下： 相关知识 表格一般都有标题来说明这个表格具体是做什么的。 你可以用<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。 例子如下： <table border="2" cellspacing="0" cellpadding="10"> <caption>班级成绩</caption> <tr>
HTML--表单类的标签
qq_45823118的博客
03-18 8281
表单5.表单元素——checked属性任务描述相关知识代码文件6.表单元素——disabled 属性任务描述相关知识代码文件7.表单元素——label 标签任务描述相关知识代码文件8.表单元素——下拉列表任务描述相关知识代码文件9.表单元素——文本域任务描述相关知识代码文件10.表单元素——提交按钮任务描述相关知识代码文件11.表单元素的综合案例任务描述相关知识代码文件 5.表单元素——checked属性 任务描述 本关任务：创建一组单选框，name属性值为marry，默认选中未婚。 要求：对每一个选项使用
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 1961
头歌：HTML——表格：第2关：表格的属性——宽、高
educoder实训平台-----html5—表格高级样式的设置
m0_59076472的博客
11-28 673
educoder实训平台-----html5—表格高级样式的设置 第1关：表格高级样式设置相关概念 CABAD 第2关：设置表格的外边框样式 <html> <head> <meta charset="utf-8"/> <title>设置表格外边框属性</title> </head> <body> <!-- ********* Begin ******* --> <table wi
Educoder头歌实践平台 Java 数据结构之图 答案.txt
11-10
Educoder头歌实践平台 中 Java 数据结构之图 共4关 金币共2300 的那个实践项目答案 由于图论问题渗透整个计算机科学，图算法对于计算机学科至关重要。成百上千的计算问题最后都可以归约为图论问题。
Educoder题目：Java入门 - 数组基础答案解析.md
11-01
Educoder题目：Java入门 - 数组基础答案解析
Educoder题目：Java入门 - 数组进阶答案解析.md
11-01
Educoder题目：Java入门 - 数组进阶答案解析
Educoder题目：Java面向对象 - String类答案解析.md
11-09
Educoder题目：Java面向对象 - String类答案解析
educoder平台操作
11-22
帮助使用educoder平台，面向过程程序设计，有关c语言，可以加入课程然后，加入课群，最后可以完成作业或考试。
Educoder Python 计算思维训练——文件操作与异常处理
01-20
第1关：从文件中读取数据：信息时代已经到来 本关的编程任务是补全 src/Step1/test1.py 文件的代码，实现相应的功能。具体要求如下： 补充代码，功能是输出文本文件 test.txt 的前n行信息，文本文件 test.txt 和测试...
EduCoder_web实训作业--表格标签—表格高级样式的设置
weixin_45803282的博客
11-15 1711
第一关 c a b a d 需要注意的是： 外边框样式属性 frame的值： above：显示上边框 below：显示下边框 hsides：显示上下边框 vsides：显示左右边框 lhs：显示左边框 rhs：显示右边框 border：显示上下左右边框 void：不显示边框 内部边框样式属性 rule的值： all：显示所有内部边框 none：不显示内部边框 rows：仅显示行边框 cols：仅显示列边框 groups：显示介于行组和列组间边框 第二关 <!-- ********* Be
第1关：表格的综合案例
最新发布
m0_73143451的博客
03-03 607
【代码】第1关：表格的综合案例。
头歌：HTML——表格：第3关：表格的属性——cellpadding
m0_61690708的博客
11-03 905
头歌：HTML——表格：第3关：表格的属性——cellpadding
数据结构 线性表 插入 删除
热门推荐
mmmm0303的博客
04-22 1万+
数据结构线性表的插入，删除 任务描述 本关任务：实现 step1/Seqlist.cpp 中的SL_InsAt、SL_DelAt和SL_DelValue三个操作函数，以实现线性表中数据的插入、删除与查找等功能。 相关知识) 线性表是最基本、最简单、也是最常用的一种数据结构。线性表结构中，数据元素之间通过一对一首尾相接的方式连接起来。具体实现时，线性表可以采用不同的存储策略。下面给出了一种基于顺序存...
表格的综合案例
weixin_45784564的博客
05-21 3905
任务描述 本关任务：按照以下要求，完成一个复杂的表格创建任务。 创建表格的要求如下： 边框为2px； 宽为100%； cellspacing为0； cellpadding为6； 标题内容为本周财政计划； 在 其它内容和效果图展示的一样。 注意：表格属性的顺序按照创建表格的要求的顺序来写。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之
第1关：表格的基本构成
weixin_45784564的博客
05-22 2229
任务描述 本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </
【EduCoder答案】HTML——表单类的标签
weixin_44505587的博客
09-05 5737
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有 HTML——表单类的标签 >>>查看 第1关:表单元素——文本框 第2关:表单元素——密码框 第3关:表单元素——单选框 第4关:表单元素——多选框 第5关:表单元素——checked属性 第6关:表单元素——disabled 属性 第7关:表单元素——label 标签 第8关:表单元素——下拉列表 第9关:表单元素——文本域 第10关:表
/data/workspace/myshixun/sparksql/src/main/java/com/educoder/bigData/sparksql/Test1.java:[10,1] illegal character: '\u00a0'
11-11
这个错误通常是由于在代码中使用了非法的Unicode字符，例如空格或非打印字符。在这种情况下，错误信息指向代码中包含非法字符的行和列。在这个例子中，错误信息指向Test1.java文件的第10行第1列，指出了一个非法字符'\u00a0'。这个字符是一个不间断的空格，它可能是从其他文本编辑器中复制粘贴到代码中的。要解决这个问题，可以手动删除非法字符并用合适的空格替换它，或者使用一个文本编辑器来查找和替换非法字符。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆小玖

您的鼓励是我的不竭动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值