前端 表格

最新推荐文章于 2024-08-01 11:11:00 发布
最新推荐文章于 2024-08-01 11:11:00 发布
阅读量294 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43303896/article/details/97989926
版权

表格

<table>:用于定义表格，<table../>元素只能包含0个或者1个<caption.../>子元素（定义标题)。有下面几个属性：

cellpadding：指定的是单元格于边框之间的距离。属性值可以是像素值，或者百分比。

cellspacing:指定的是单元格与单元格之间的间距。属性值可以是像素值，或者百分比。

width:指定宽长度，属性值可以是像素值，或者百分比。

<caption>:用于定义表格标题

<tr>:定义表格行，该元素只能包含<th>   <td>俩种元素。

<td>:定义单元格，该元素和<div../>一样，包含各类子元素，包括在<td.../>插入一个表格，它还有如下几个属性。

rolspan:指定该单元格跳多少列，该属性值就是一个数字。

rowspan:指定该单元格跳多少行，

height,width:指定单元格的宽高，可以是像素值，或者百分比。

<th>:定义表头，用法和<td>几乎一样，比<td>多文本居中和加粗效果。

<tbody>:定义表格主体，该元素只能包含<tr>元素。

<thead>:定义表格头，用法和<tbody>基本相似，只是功能稍有差别。

<tfoot>:定义表格脚，用法和<tbody>基本相似，只是功能稍有差别。

<tbody>,<thead>,<tfoot>元素可以让我们对元素进行分组。<thead>包含的内容在<tbody>上面，<tbody>包含的内容在<tfoot>上面。

<col>:该元素用于为表格中的一个或多个列指定属性。该元素只能留在<table../>或<colgroup>元素内。

<colgroup>:该元素为表格中的多个列指定属性值。

下面给一些代码让小伙伴们熟悉一下：

<table border="2" style="border-collapse:collapse">
            <caption>课表</caption>
            <tr>
                <th></th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </tr>
            <tr>
                <td>第一节</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>大四自习</td>
                <td rowspan=12> 休息</td>
                <td>上课</td>
            </tr>
            <tr>
                <td>第二节</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>大四自习</td>
                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>第三节</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td >大四自习</td>
                <!-- <td></td> -->
                <td>上课</td>
            </tr>

            <tr>
                <td>午休</td>
                <td colspan=5></td>
            </tr>

            <tr>
                <td>第四节</td>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td rowspan="2">大四自习</td>
                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>第五节</td>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>

                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>第六节</td>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td rowspan=2>上课</td>
                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>第七节</td>
                <td>上课</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
       
                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>晚饭</td>
                <td colspan=5></td>
                <!-- <td></td> -->
                <td></td>
            </tr>
            <tr>
                <td>第八节</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>第九节</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <!-- <td></td> -->
                <td>上课</td>
            </tr>
            <tr>
                <td>第十节</td>
                <td colspan=5 style="text-align: center">大四自习</td>
                <!-- <td></td> -->
                <td>大四自习</td>
            </tr>
            <tr>
                <td></td>
                <td colspan="7">好长啊</td>
            </tr>
        </table>
        <p>cellpadding指的是圆格与圆格边框之间的距离</p>
        <p>cellpacing指的是圆格边框与圆格边跨之间的距离</p>
        <p>style="border-collapspse可把内外边框合二为一"</p>

效果图：

课表
 

这里充分利用了<td>标签的跨行跨列来实现的效果图。

现在我们来简单举例一下<tbody>,<thead>,<tfoot>元素分组用法

和如何改变列表的整列属性。


        <table border="2" style="border-collapse:collaspe" cellpadding="5px">
            <caption>表格的thead tbody tfoot应用</caption>

             <colgroup>   <!-- //一个修改table列的域 -->
                 <col style="background:rgb(151, 151, 228)">   <!-- 不设置span的情况下默认第一列 -->
                <col span="2" style="background:rgb(230, 79, 79)">   <!--span=2 代表从第二第三行修改-->
                <col></col>
                <col style="background:chocolate;text-align:center">   <!--这里文本没有居中-->

            </colgroup>

            <tfoot>
                <tr>
                    <td>004</td>
                    <td>某某某</td>
                    <td>男</td>
                    <td colspan="2">医疗兵</td>
                    <!-- <td>25</td> -->
                </tr>
                <tr>
                    <td>005</td>
                    <td>张xx</td>
                    <td>男</td>
                    <td>adc</td>
                    <td>33</td>
                </tr>
            </tfoot>

            <tbody>
                    <tr>
                        <td>001</td>
                        <td>张三</td>
                        <td>男</td>
                        <td>坦克</td>
                        <td>32</td>
                    </tr>
                    <tr>
                        <td>002</td>
                        <td>李四</td>
                        <td>男</td>
                        <td>狙击手</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>003</td>
                        <td>胡xx</td>
                        <td>男</td>
                        <td>指挥官</td>
                        <td celspan="2">19差一点点</td>
                    </tr>
                </tbody>

            <thead>
                <tr>
                   <th>成员号</th>
                   <th>姓名</th>
                   <th>性别</th>
                   <th >部门</th>
                   <th>年龄</th>
                </tr>

            </thead>
        </table>

代码效果：

一、我们可以看到，图中我写的顺序是先<tfoot>,后<tbody>,最后<thead>.的。但是执行排序的顺序是先<thead>,<tbody>

二、<colgroup>是一个修改table列的域，<col>放在里面可以改变table列的属性。

<col style="background:rgb(151, 151, 228)"> 改变了第一列的背景颜色（span不设置的情况下默认第一行）；

<col span="2" style="background:rgb(230, 79, 79)"> --span=2 代表从第二第三列修改

 

<col></col>

<col style="background:chocolate;text-align:center"> 这俩行代码意思跳过第四列修改第五列

 

 

 

是萝卜啊丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 表格表单
m4587的博客
07-15 1182
inputtype="checkbox"name="hobby"value="zq"/>足球篮球羽毛球。乒乓球。
前端-表格
无情歌神的博客
06-15 625
1.表格基础 （1）<table></table>:HTML中的一个表格 ①border属性：设置表格的边框，默认为0px，以数字为单位 ②width属性：设置表格的宽度，以数字为单位 ③height属性：设置表格的高度，以数字为单位 ④align属性：设置表格的对齐方式（left right center） （2）<tr></tr>:表示表格中...
前端页面如何创建表格？table的结构、属性有哪些？
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-01 390
通过本文的学习，我们深入了解了 HTML 表格的基本结构、属性以及如何使用 CSS 进行样式化。此外，还介绍了如何通过 JavaScript 实现动态功能，以及如何根据不同的应用场景调整表格的样式和布局。希望这些知识能够帮助你在实际项目中更好地使用表格组件。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
Web前端之表格
花&败
10-29 5909
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
前端表格总结
ABCDNMDHH的博客
07-25 896
前端表格总结
前端入门——表格
qq_44213733的博客
09-23 102
Web 前端学习之 表格
程序员小白的博客
09-29 5049
这里写自定义目录标题1. 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { /*设置宽度*/ width: 100px; /*设置高度*/ height: 100px; background-color: yel
有关表格的前端页面
qq_29720781的博客
01-16 1579
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/views/resource.jsp"%> <style type="text/css"> td .form-control{ border: none;
前端(表格)
阳神
02-15 301
表格 table 存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理表格式数据。 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </tab...
web前端-HTML-表格
jinchenpeng的博客
05-26 2022
例子： 再例如： 单元格的合并 表格的属性： 例如： 例如：去掉单元格之间的边距 表的行和列的属性： 例如： 单元格合并练习1: 单元格合并练习2：
前端 表格 table
weixin_54352228的博客
07-06 551
表格 table table表格，块元素 (废弃) cellpadding=“20” cell单元格 单元格内边距 cellspacing=“0” 单元格之间的距离 thead用来包裹行标题，平时开发不用写，浏览器自动添加 王金龙 20 男 张
Datatable表格展示前端插件
07-26
主要为数据的表格展示，包括分页功能，数据为空的提示等，搜索等
【Web前端HTML5&CSS3】15-表格
VectorX's Blog
06-13 2091
表格 1、表格 2、长表格 3、表格的样式 HTML代码 CSS代码 4、表单 文本框 密码框 提交按钮 单选框 多选框 下拉列表 5、表单补充 按钮
前端基础之表格（看这里就够了）
小古月成的博客
08-05 2019
代码 <!DOCTYPE html> <html> <head> <title>前端基础之表格table</title> <meta charset="UTF-8"> <style> .table{ margin: 10px auto; border...
前端入门：HTML（表格）
yscy0801的博客
03-25 782
下午点击查看详情点击查看详情点击查看详情晚自习王昭君对抗路发育路星期一
CSS基础
qq_41027812的博客
08-23 158
CSS基础 css简介 css是什么 Cascading style sheets (层叠样式表)（级联样式表） css作用 改变文本内容：(文本大小，文本颜色，对齐方式…) *改变 标签的样式 改变页面的布局 css引入方式 行内引入（行内式） <p style="color: red;font-size: 20px;"> hello world </p> 特点：结构层和表示层完全不分离，代码冗余，只作用于当前
【前端HTML】表格、列表、表单
qq_65727637的博客
03-31 167
表格、列表、表单、下拉列表、文本域
前端入门篇（七）表格
安之ccy的博客
01-26 251
table表格标签 tr定义行 th，行中单元格，用于定义标题 td，行中单元格，定义内容 colspan合并列 rowsapn合并行 上(sup)下(sub)标 简单表格： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
web前端基础知识:表格
m0_62181310的博客
03-31 3825
一.表格 1.表格的基本标签 标签组成: table 表格整体 tr 行 td 单元格 嵌套关系:tabel>tr>td 2.表格的相关属性 border 边框粗细 width 宽度 height 高度 cellspacing 单元格与单元格之间的距离 cellpadding 单元格内容距离边框的距离 <table border="1" width="500".
【前端】实现表格简单操作
qq_2511276124的博客
05-06 952
表格合并基础篇 本篇是在上一章的基础上实现，实现了的功能有添加行、删除行、逆向选区、取消合并功能。 添加行分为在上面添加和在下面追加行。 利用 insertAdjacentElement 方法实现，该方法可以实现从前插入元素和从后插入元素。 删除当前行就是利用元素remove()方法,从dom树种删除元素。 逆向选区是指选区从下往上选。 解决思路：记录当前选区时鼠标移动方向，往左上移动则为负,往右下移动则为正。负时在首位插入选中节点，正时从尾部追加选中节点，这样合并只需取第一个选中节点即可。 获取当前元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值