JavaWeb学习之路(21)–HTML之表格-阿里云开发者社区

开发者社区> 程序员大阳> 正文

JavaWeb学习之路(21)–HTML之表格

简介: 本文目录 1. 前言 2. 表格标签 3. 表格的行与列 4. 页眉 5. 页脚 6. 小结
+关注继续查看

1. 前言

表格有多重要我就不需要赘述了吧,我们日常访问的网页处处都有表格,所以表格是非常非常重要的HTML元素。


本篇我们就来简单介绍下表格的用法。


2. 表格标签

我们可以使用<table>标签来定义一个表格,然后使用border属性来设定表格边框的宽度,如下。


注意此时表格里面还没有内容,所以网页也显示不出什么东西来。


<table border="1">


   </table>

1

2

3

3. 表格的行与列

HTML的表格是先编写行<tr>,然后在行里面编写列<td>,所以我们定义一个表格如下:


<table border="1">

       <tr>

           <td>张三</td>

           <td>男</td>

       </tr>

       <tr>

           <td>李四</td>

           <td>女</td>

       </tr>

   </table>

1

2

3

4

5

6

7

8

9

10

这个表格首先有2行,即2个tr。然后每一行有两列,即两个td。所以效果如下:



4. 页眉

表格一般需要有标题,我们可以把标题放到页眉里面。页眉标签为thead,标题列的标签为th。所以带页眉标题的代码如下。


需要注意的是,定义页眉后,我们一般将行列放到表格的主体tbody标签内部,这样更加规范。


 <table border="1">

       <thead>

           <th>姓名</th>

           <th>性别</th>

       </thead>

       <tbody>

           <tr>

               <td>张三</td>

               <td>男</td>

           </tr>

           <tr>

               <td>李四</td>

               <td>女</td>

           </tr>

       </tbody>

   </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

效果如下,可见标题列字体是加粗的。



5. 页脚

表格还可以添加页脚,可以在页脚显示一些附加信息,例如学生的总数,页脚标签为tfoot。添加页脚后代码如下:


<table border="1">

      <thead>

          <th>姓名</th>

          <th>性别</th>

      </thead>

      <tbody>

          <tr>

              <td>张三</td>

              <td>男</td>

          </tr>

          <tr>

              <td>李四</td>

              <td>女</td>

          </tr>

      </tbody>

      <tfoot>

          <tr>

              <td>

                  学生总数:

              </td>

              <td>

                  2人

              </td>

          </tr>

      </tfoot>

  </table>

对应效果如下:


一般页脚用的比较少。


6. 小结

HTML表格主要表达了表格的内容,具体如何将表格做的好看,还得使用CSS,后续课程我们会对CSS样式进行讲解。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java Swing编程:JTable表格
表格是GUI编程中使用较多,但也是最麻烦的一个控件之一。表格是用来显示二维数据,提供编辑,选择等功能。如果只是显示数据,这还是非常easy的,只要在JTable中传入二维数组或集合就可以了。 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一。表格是用来显示二维数据,提供编辑,选择等功能。如果只是显示数据,这还是非常easy的,只
1305 0
2020年,我们该如何学习 WEB 前端开发
每当想要开始学习,脑子里总会跳出一系列问题:WEB前端的学习先后顺序是什么?PC端必须要掌握哪些知识和框架?移动端要掌握哪些知识和框架?TypeScript和node.js是否为可学可不学?新手应该按照什么先后次第学习呢?本文是阿里巴巴淘系技术部高级前端工程师——小问的个人经验总结,希望帮到处于迷茫期的你!
2818 0
算法学习之路|部分A+B
正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA。例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6。
887 0
sql嵌入html格式显示报表
在使用监控系统报警的时候,如果显示的报警信息为纯粹的文本,会枯燥很多,而且看起来很不清晰。 比如我们要监控表空间的使用情况,输出列有表空间名,状态,区管理方式,总共的空间,使用的空间,剩余的空间等。
601 0
WEB 容器|学习笔记
快速学习 WEB 容器
14 0
从零开始学习 webservice第一集,java webservice简单实例入门教程
现在从零开始学习webservice 概念自己百度搜,总之,webservice就相当于一个接口,就像你走进了一家售货店,你不需要知道这家店怎么卖给你东西,你拿着钱去,说我要一包玉溪,人家就会给你返回一包玉溪烟,这就是webservice。
1478 0
+关注
程序员大阳
努力努力再努力
588
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载