ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaWeb系列教程(21)–HTML之表格

2021-10-08 16:03:05  阅读:267  来源: 互联网

标签:JavaWeb 表格 页脚 标签 如下 HTML 页眉 21


本文目录

1. 前言

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

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

2. 表格标签

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

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

	<table border="1">

    </table>

3. 表格的行与列

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

	<table border="1">
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
    </table>

这个表格首先有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>

效果如下,可见标题列字体是加粗的。
在这里插入图片描述

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

标签:JavaWeb,表格,页脚,标签,如下,HTML,页眉,21
来源: https://blog.csdn.net/woshisangsang/article/details/120653192

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有