前端——html——html表格

最新推荐文章于 2024-06-20 10:34:39 发布
最新推荐文章于 2024-06-20 10:34:39 发布
阅读量170 收藏 1
点赞数
文章标签： 前端 html elementui linq javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61442607/article/details/125253040
版权

TML 表格

表格由 <table> 标签来定义。

每个表格均有若干行(由 <tr> 标签定义)，每行被分割为若干单元格(由 <td> 标签定义)。

字母 td 指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>水平标题:</h4>
    
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
    
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

一个没有边框的表格：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

如何显示表格表头：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

演示一个带标题 (caption) 的表格：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

如何定义跨行或跨列的表格单元格：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

如何在不同的元素内显示元素：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

如何使用 Cell padding 来创建单元格内容与其边框之间的空白：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

如何使用 Cell spacing 增加单元格之间的距离：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

漂亮的表格：https://c.runoob.com/codedemo/3187/

小白龙白龙马
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习之HTML——表格
Jane_xxxxxy的博客
07-26 615
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 表格不是用来布局页面的,而是用来展示数据的。 表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>
（前端）HTML之表格
weixin_65479202的博客
04-21 1623
在HTML中学习表格非常有必要，表格的使用比较常见也很广泛！！！
【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-18 8799
一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 ) 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 ) 三、表头单元格标签 四、表格标题标签 五、合并单元格 1、合并单元格方式 2、合并单元格顺序 3、合并单元格流程 六、合并单元格示例 1、原始表格 2、跨行合并单元格 3、跨列合并单元格
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 8445
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
HTML表格使用全指南，真的很详细
最新发布
(黎子)人生编码
06-20 1710
通过使用CSS媒体查询和JavaScript，开发者可以创建出既美观又实用的表格，确保用户在任何设备上都能获得良好的浏览体验。通过合理的语义化标签使用，开发者可以创建出既美观又易于理解的表格。通过使用适当的属性和技巧，我们可以提高表格的可访问性。通过CSS样式设计和布局控制，HTML表格不仅可以提供清晰的数据展示，还能成为网页上的美观元素。跨行和跨列是表格设计中常用的技术，用于合并单元格，使表格布局更加灵活和紧凑。控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。标签进行表格的语义化。
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 9390
如何使用html制作一个简易的表格
HTML——表格
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML—表格
Ywyyy231128的博客
11-14 4717
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
狂神说——HTML完整教学通俗易懂
05-20
5. 表格（）：HTML中的标签用于创建表格，表示行，表示单元格，表示表头。可以使用colspan和rowspan属性合并单元格。 6. 列表（、和）：无序列表和有序列表用于展示列表项，标签包裹每个列表项。 7. 表单（）：...
HTML+CSS购物网站——小米有品
03-23
购物车页面则会有商品列表、数量调整、总价计算等功能，这需要使用表格（`<table>`）、列表（`<ul>`、`<li>`）以及表单（`<form>`）等元素。个人信息页可能会包含用户头像、昵称、联系方式等，而登录和注册页面则会...
Web前端开发技术——HTML、CSS、JavaScript
07-15
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
静态门户网站实例——得艺
03-03
【静态门户网站实例——得艺】是一个使用jQuery框架构建的前端项目，主要涉及的技术栈包括jQuery、HTML、CSS和JavaScript。这个实例旨在展示如何利用这些技术创建一个动态且交互性强的静态网站，为用户提供丰富的...
HTML中的表格和表单（含有示例代码）
weixin_57197500的博客
05-20 4万+
表格 表格的基本构成标签 table标签：表格标签 caption标签：表格标题 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格 表格的基本结构 <table>定义表格 <caption>表格标题</caption> <tr>定义表行 <th>定义表头</th> </tr> <tr&g...
一文搞懂HTML中的表格、表单、列表
2301_78850344的博客
04-13 2305
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
html-表格
2301_78251908的博客
03-20 948
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性。border="1",用来设置表格的边框，没有这个属性，边框不显示。一个完整的表格包含三个部分：表格标题，表格表头，表格主体。thead：定义表格的头部，内部嵌套tr>th。tbody：定义表格的主体,内部嵌套td>td。td：table dock：定义表格的单元格。table：表格，作用是定义一个表格的结构。tr： table rows：定义表格的行。th可以设置表头，可以使用tr>th设置。关系：table > tr >td。
HTML 表格 表单的制作
m0_60045654的博客
10-21 6660
表格是一种二维结构，横行纵列。表格由单元格组成。每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。从服务器角度讲，收集用户的输入数据。从客户端角度来讲，向服务器提交数据的位置。本站搜索<input type="submit" name="button" id="button" value="搜索"></form>
HTML网页制作基础教程
"网页制作基础语言-HTML(1).ppt" HTML，全称为HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。它的主要作用是通过使用一系列特定的...因此，掌握HTML对于网页制作和前端开发至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值