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样式进行讲解。

相关文章
|
19天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
29天前
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
|
29天前
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
29天前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
43 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
36 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
HTML表格
HTML表格
42 4
|
29天前
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
40 1