HTML——表格

最新推荐文章于 2024-07-10 01:10:22 发布
最新推荐文章于 2024-07-10 01:10:22 发布
阅读量1.9k 收藏 5
点赞数 5
分类专栏： educoder 文章标签： html 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54327001/article/details/121367676
版权

第1关：表格的基本构成

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。这里先创建一个两行两列的表格。

上面border属性表示给表格添加边框，它的值2表示边框的宽度为2px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

<table border="5">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
    </tr>
</table>

    <!-- ********* End ********* -->
</body>
</html>

第2关：表格的属性——宽、高

你可以使用width和height来定义表格的宽和高，使表格更大方、美观。

需要注意的是：这里的width和hegiht单位是px，可加可不加。

这里width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

        
        <table border="1" width="100%" height="200">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
    </tr>
</table>
        
        
    <!-- ********* End ********* -->
</body>
</html>

第3关：表格的属性——cellpadding

这里用到了表格的另一个属性cellpadding，它规定了单元边沿与其内容之间的空白。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

<table border="2" cellpadding="6">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
    </tr>
</table>

    <!-- ********* End ********* -->
</body>
</html>

第4关：表格的属性——cellspacing

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这里用到了表格的另一个属性cellspacing，它规定了单元格之间的空间。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->

        <table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>

    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
    </tr>
</table>
        
        
    <!-- ********* End ********* -->
</body>
</html>

第5关：表格的标题

表格一般都有标题来说明这个表格具体是做什么的。

你可以用<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <!-- ********* Begin ********* -->

<caption>科目成绩</caption>

        <!-- ********* End ********* -->
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
       </tr>
    </table>
</body>
</html>

第6关：表格——<td> 标签的 rowspan 属性

你可以用<td>标签的rowspan属性来实现，它规定了单元格可横跨的行数。

  1. <tr>
  2. <td rowspan="3">科目</td>
  3. <td>语文 </td>
  4. <td>80</td>
  5. </tr>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
<tr>
        <td>商品 </td>
        <td>数量</td>
        <td>单价</td>
        <td>备注</td>
    </tr>

    <tr>
        <td>短袖</td>
        <td>70</td>
        <td>30</td>
        <td rowspan="2">无</td>
    </tr>

    <tr>
        <td>裤子</td>
        <td>50</td>
        <td>30</td>
    </tr>

    <!-- ********* End ********* -->
    </table>
</body>
</html>

第7关：表格——<td>标签的colspan属性

你可以用<td>标签的colspan属性来实现，它规定了单元格可横跨的列数。

  1. <tr>
  2. <td colspan="3">科目 </td>
  3. </tr>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->

    <tr>
        <td>商品</td>
        <td>数量</td>
        <td>单价</td>
    </tr>

    <tr>
        <td>短袖</td>
        <td>70</td>
        <td>30</td>
    </tr>

    <tr>
        <td>裤子</td>
        <td>50</td>
        <td>30</td>
    </tr>

        <tr>
        <td>合计</td>
         <td colspan="2">3600</td>
    </tr>
    <!-- ********* End ********* -->
    </table>
</body>
</html>

第8关：表格的综合案例

本来表格有自带的属性align也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。

让文本居中

  1. table{
  2. text-align: center;
  3. }

text-align属性有下面的几个值：

  • left：左对齐；

  • center：居中对齐；

  • right：右对齐；

  • justify：两端对齐。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <style>
    body{
       margin:30px;
    }
    table{
      text-align: center;
    }
    </style>
    <!--设置表格-->

       <table border="2" cellspacing="0" width="100%" cellpadding="6">
           
<caption>本周财政计划</caption>
    <tr>
        <td rowspan="2" colspan="2">项目</td>
        <td colspan="2">本周发生</td>
        <td rowspan="2">备注</td>
    </tr>

    <tr>
        <td >收入</td>
        <td>支出</td>
    </tr>

    <tr>
        <td rowspan="3">收入</td>
        <td>贷款收回</td>
        <td>8700</td>
        <td>0</td>
        <td></td>
    </tr>

    <tr>
        <td>内部转款</td>
        <td>6000</td>
        <td>0</td>
        <td></td>
    </tr>

    <tr>
        <td>收入合计</td>
        <td>14700</td>
        <td>0</td>
        <td></td>
    </tr>

<tr>
        <td rowspan="3">支出</td>
        <td>采购支出</td>
        <td>0</td>
        <td>5000</td>
        <td></td>
    </tr>

    <tr>
        <td>工资支出</td>
        <td>0</td>
        <td>7000</td>
        <td></td>
    </tr>

    <tr>
        <td>支出合计</td>
        <td>0</td>
        <td>12000</td>
        <td></td>
    </tr>

</table> 
        
    <!-- ********* End ********* -->
</body>
</html>

usrname为username
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML标记语言——表格标记
12-10
上文：标记语言——标题 原文出处 标准化设计解决方案 – 标记语言和样式手册 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 从标记语法谈起 Chapter2 邪恶的表格？ 你知道...
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 1960
头歌：HTML——表格：第2关：表格的属性——宽、高
第1关：表格的基本构成
weixin_45784564的博客
05-22 2227
任务描述 本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </
【EduCoder答案】HTML——表单类的标签
weixin_44505587的博客
09-05 5737
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有 HTML——表单类的标签 >>>查看 第1关:表单元素——文本框 第2关:表单元素——密码框 第3关:表单元素——单选框 第4关:表单元素——多选框 第5关:表单元素——checked属性 第6关:表单元素——disabled 属性 第7关:表单元素——label 标签 第8关:表单元素——下拉列表 第9关:表单元素——文本域 第10关:表
HTML--表格
qq_45823118的博客
03-17 1348
1.表格的标题 任务描述 本关任务：添加一个表格标题，内容为科目成绩。 实现的效果如下： 相关知识 表格一般都有标题来说明这个表格具体是做什么的。 你可以用<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。 例子如下： <table border="2" cellspacing="0" cellpadding="10"> <caption>班级成绩</caption> <tr>
表格的综合案例
m0_51863774的博客
10-30 1619
/按照最细的划分，八行五列，再带入colspan和rowspan两个参数，然后修改，这里注意，表格属性设置的时候，彼此间隔只是一个空格，不能多打，然后一定是竖着写的，不能横着写。不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下是很明显的。这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性。这里介绍一个控制表格内文本方向的属性，本来表格有自带的属性。
表格标签和列表标签综合案例练习
weixin_66455621的博客
03-02 343
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>综合案例练习</tit.
表格标签及练习
Moerin_的博客
08-28 161
表格练习
html表格——表格合并.docx
09-26
HTML 表格合并 HTML 表格合并是指在 HTML 表格中，合并单元格的技术。合并单元格可以将多个单元格合并成一个单元格，从而实现表格的灵活布局。 在 HTML 表格中，cell 属性是一个非常重要的概念。cell 属性表示表格...
HTML5制作表格样式
09-27
接下来是关键部分——表格的HTML结构。`<table>`元素是表格的容器，`<thead>`表示表头，`<tbody>`表示表格主体，`<tfoot>`表示表尾。例如： ```html 列1 列2 行1，单元格1 行1，单元格2 行2...
HTML——月历
10-29
HTML、CSS 和 JavaScript 是网页开发的三大核心技术，它们共同构建了网页的结构、样式和交互功能。在这个项目中，我们利用这些技术制作了一个简单的月历应用程序。下面将详细讲解这个月历实现的关键知识点。 首先，...
HTML--表单类的标签
qq_45823118的博客
03-18 8276
表单5.表单元素——checked属性任务描述相关知识代码文件6.表单元素——disabled 属性任务描述相关知识代码文件7.表单元素——label 标签任务描述相关知识代码文件8.表单元素——下拉列表任务描述相关知识代码文件9.表单元素——文本域任务描述相关知识代码文件10.表单元素——提交按钮任务描述相关知识代码文件11.表单元素的综合案例任务描述相关知识代码文件 5.表单元素——checked属性 任务描述 本关任务：创建一组单选框，name属性值为marry，默认选中未婚。 要求：对每一个选项使用
HTML <td> 标签的 colspan 属性
weixin_30835649的博客
09-04 270
表格单元横跨两列的表格： <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> &lt...
Web程序设计基础2021秋--【表格标签-表格基本结构】【html5—表格高级样式的设置】
hannah2233的博客
11-29 3501
文章目录一、 表格标签-表格基本结构第1关：网页表格的基本概念第2关：创建简单的表格编程要求：代码展示第3关：表格行样式的设置编程要求代码展示第4关：表格中单元格样式的设置编码要求代码展示二、 html5—表格高级样式的设置第1关：表格高级样式设置相关概念第2关：设置表格的外边框样式编程要求代码展示第3关：设置表格的内边框样式编程要求代码展示第4关：表格中单元格的合并编程要求代码展示第5关：表格的综合案例编程要求代码展示 一、 表格标签-表格基本结构 第1关：网页表格的基本概念 1、定义表格的项目表头的HT
《Web应用开发》(头歌)
热门推荐
m0_58186089的博客
03-01 1万+
这里写目录标题实验一HTML——表单类的标签第1关 表单元素——文本框第2关 表单元素——密码框第3关 表单元素——单选框第4关 表单元素——多选框第5关 表单元素——checked属性第6关 表单元素——disabled 属性第7关 表单元素——label 标签第8关 表单元素——下拉列表第9关 表单元素——文本域第10关 表单元素——提交按钮第11关 表单元素的综合案例HTML入门——基础第1关 初识HTML：简单的Hello World网页制作第2关 HTML结构：自我简介网页HTML入门——文本第1
HTML——表格 ※
Junds0的博客
12-28 963
这里介绍一个控制表格内文本方向的属性。本来表格有自带的属性align，也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下，是很明显的。在Begin-End区域创建你的第一个表格，它的边框宽度为5px，要求内容和效果图展示的一样。这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。第二关虽然设置了宽、高，可是内容是紧挨着边框的，怎么使表格的内容和边框有间距呢？
html表格
weixin_53475254的博客
11-08 1460
html表格html表格初始表格的宽高表格的属性——cellpadding表格的属性——cellspacing表格的标题表格——\ 标签的 rowspan 属性表格——\标签的colspan属性文本对齐方式 html表格 初始 HTML表格由行和列组成，这里我们就用HTML标签写一个表格。标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。这里先创建一个两行两列的表格。代码如下： <table border="2"> <tr>
通过 tomcat 让手机访问到电脑写的 html 网页
最新发布
m0_75138009的博客
07-10 395
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
layui表格监听全选_layui学习笔记——监听表格复选框选择
05-26
在 layui 表格中，可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下： 1. 在表格中添加复选框列，并设置lay-skin属性为primary，表示使用layui风格的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件，可以使用layui的form模块来实现。需要注意的是，由于表格是动态生成的，所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型，如果行选则为：row，如果全选则为：all，如果取消选择则为：uncheck console.log(table.checkStatus('test').data); // 获取选中行的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页，则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是，表格中的复选框列必须有唯一的字段名，否则无法在JavaScript代码中获取选中行的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值