HTML&CSS基础学习笔记1.17-表格头部与尾部

ajhongshaorou

2016-08-06

表格的头部和尾部

既然有标签表示表格的主体，那么自然表格的头部和尾部也有对应的标签。

HTML中使用<thead>标签表示表格的头部，使用<tfoot>标签表示表格的尾部。

有了头部和尾部之后，<table>里的结构就是这样：

Html代码 
<table>    
     
  <thead>    
    <tr>    
        ...    
    </tr>    
  </thead>    
     
  <tfoot>    
    <tr>    
        ...    
    </tr>    
  </tfoot>    
     
  <tbody>    
    <tr>    
        ...    
    </tr>    
  </tbody>    
     
</table>    

现在就让我们来试着用下这个2个标签吧：

Html代码 
<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>使用thead和tfoot标签</title>    
</head>    
<body>    
    <h2>使用thead和tfoot标签</h2>    
    <table border="1">    
        <thead>    
            <tr><td>序号</td><td>物品</td><td>价格</td></tr>    
        <tbody>    
            <tr><td>1、</td><td>铅笔</td><td>￥1.00</td></tr>    
            <tr><td>2、</td><td>毛笔</td><td>￥5.00</td></tr>    
            <tr><td>3、</td><td>钢笔</td><td>￥10.00</td></tr>    
        </tbody>    
        <tfoot>    
            <tr><td colspan="2">总计：</td><td>￥16.00</td></tr>    
    </table>    
</body>    
</html>    

结果会是怎么样？可以前往码芽网学习体验哦http://www.mayacoder.com/lesson/index

查看吧~~~

HTML&CSS基础学习笔记1.17-表格头部与尾部

html表格 border padding margin css

ajhongshaorou

0 关注 0 粉丝 0 动态

相关推荐

js实现表格单列按字母排序

本文实例为大家分享了js实现表格单列按字母排序的具体代码，供大家参考，具体内容如下。<link href="../css/表格数据搜索.css" rel="stylesheet">. <input

移动开发与培训 2020-08-16

js实现表格数据搜索

<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">

ReunionIsland 2020-08-16

表格标签的使用

在HTML网页中，要想创建表格，就需要使用表格相关的标签。表格包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标

行吟阁 2020-08-09

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn 2020-08-09

Asp.net Form 动态产生表格核心后台代码

<asp:Button ID="btnProTable" runat="server" Text="产生表格" />

swiftwwj 2020-07-05

HTML-表格

表格由<table>标签来定义，其中行由<tr>标签定义，列由<td>标签定义。快速写行和列的方法为：eg:6行7列可以写成：tr*6>td*7然后按enter键。表头由<th>标签定义，设置行高的属性

pythonclass 2020-06-25

html学习

图像标签　　<img src="图像url" alt= “图像显示不出来显示此文字” title=“鼠标在图片上提示的文字” width="宽度" heigth="heigth" borde

nercon 2020-06-14

通过css润色html表格

--th和td都是单元格，th里的内容会默认加粗并且居中 -->. 这样是不是高档了很多。

coulder 2020-06-09

html table表格斜线表头的实现方法总汇

在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法：。其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的

玫瑰小妖 2020-06-07

2020/6/3 JS 对表格元素进行增删改操作和事件监听

　　insertRow：在指定索引位置插入一行。　　createCaption()：为该表格创建标题。　　deleteRow：删除表格中index索引处的行。　　使用返回值改变HTML元素的默认行为：HTML元素大都包含了自己的默认行为，例如：超链接、提交

pythonclass 2020-06-03

html table表格标签内容如何居中显示？表格的align属性的用法介绍

本篇文章主要的介绍了关于HTML 表格table标签的居中使用，还有关于align属性在table表格标签中的使用方法，可以帮助表格对齐和表格中的文本对齐。接下来让我们来看看这篇文章吧。align 属性规定表格相对于周围元素的对齐方式。通过运用align属

lyg0 2020-05-28

基于JavaScript实现表格隔行换色

我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色。table对象集合 cells[]：返回包含表格中所有单元格的一个数组。确定事件: 文档加载完成 onload 2. 事件

huzijia 2020-05-08

HTML <thead> 标签

<thead> 标签仅得到所有主流浏览器的部分支持。<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与tbody和tfoot元素结合起来使用。它们的出现次序是：thead、tfoot

行吟阁 2020-05-11

HTML <tfoot> 标签

<tfoot> 标签仅得到所有主流浏览器的部分支持。<tfoot> 标签定义表格的页脚。tfoot 元素应该与thead和tbody元素结合起来使用。thead 元素用于对 HTML 表格中的表头内容进行分组，而 tbody 元素用

黎豆子 2020-05-11

HTML <tbody> 标签

<tbody> 标签仅得到所有主流浏览器的部分支持。<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与thead和tfoot元素结合起来使用。它们的出现次序是：thead、tfoo

玫瑰小妖 2020-05-11

HTML表单

--表格头，内容居中，加粗显示-->. <input>标签:<input type="类型属性" name="名称" ……<div>标签是一个区块容器标记，<div>&

HSdiana 2020-05-10

el-table 表格循环多张图片

-- 图片有多张的情况先分隔为数组然后利用v-for 遍历得到 src -->. <el-image style="width: 50px; height: 50px; margin-right: 10px;" :sr

黎豆子 2020-05-08

html表格显示

<table border="1" height="300" width="300"> <tr> <td>朱仁贵</td>

haocxy 2020-04-11

demo48-表格标签

th:表头,t是table的意思,h是header的意思.所以th合起来就是表格头标签.简称表头标签

黎豆子 2020-03-28

demo49-表格合并

<!DOCTYPE html>. width: 1000px;height: 50px;border: 1px solid black;border: 1px solid black;. <!--. &l

haocxy 2020-03-28

ajhongshaorou

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号