HTML笔记-表格

最新推荐文章于 2024-05-20 21:56:33 发布
最新推荐文章于 2024-05-20 21:56:33 发布
阅读量948 收藏 20
点赞数 17
文章标签： 笔记 html5 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73589012/article/details/135265339
版权

示例运行代码1：如何在 HTML 文档中创建表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<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>

HTML 表格：

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基本结构：

1、<table>…</table>：定义表格

2、<th>…</th>：定义表格的标题栏（文字加粗）

3、<tr>…</tr>：定义表格的行

4、<td>…</td>：定义表格的列

HTML 表格和边框属性：

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

HTML 表格表头：

表格的表头使用 <th> 标签进行定义。

表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。

大多数浏览器会把表头显示为粗体居中的文本：

运行示例代码2：演示一个没有边框的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

运行示例代码3：如何显示表格表头

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

运行示例代码4：带标题 (caption) 的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

运行示例代码5：定义跨行或跨列的表格单元格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

运行示例代码6：在不同的元素内显示元素

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

运行示例代码7：使用 Cell padding 来创建单元格内容与其边框之间的空白

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

运行示例代码8：使用 Cell spacing 增加单元格之间的距离

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

一只努力的爬虫呀
关注
  • 17
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML 笔记 - eDiary
12-10
HTML是前端开发中不可缺少的一门语言.TML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．...HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
PHP笔记-表格及分页功能
IT1995的博客
01-10 1639
运行截图如下： 前端代码如下： Student.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>HelloWorld</h1> <table border="1" ..
HTML学习笔记08-表格
梦忆安凉的博客
06-27 1215
HTML表格 表格由<table>标签来定义，表格的行由<tr>标签来定义，表格的列由<td>标签来定义 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> &l...
HTML-表格布局
zhaxideilei的博客
05-28 3211
1.0table标签 1.1table标签是表格布局标签，可以通过表格之间的嵌套合并来实现多所需要的表格。 <table>表格标签 <tr>行标签 <th>表头标 <td>列标签 <thead>定义表头 <tbody> 元素用于对 HTML 表格中的主体内容进行分组 <tfoot> 元素用于对 HTML 表格中的表注（页脚） 通过如图方式实现 <!DOCTYPE html>..
HTML学习笔记——05：表格
qq_31532983的博客
01-15 807
HTML-表格
前端学习笔记-HTML（2）表格二
08-19
前端学习笔记-HTML（2）表格二。前端学习笔记-HTML（2）表格二。
html精简笔记
04-11
html精简笔记，针对常见标签，包括表格，有序无序，还有表单提交，还有图层等等。
AngularJS基础知识笔记之表格
12-29
表格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 <th>Name <th>Marks <tr ng-repeat=subject> <td>{{ subject.name }} <td>{{ ...
柯尔特-webdevbootcamp-笔记
02-10
柯尔特-webdevbootcamp-笔记 到目前为止涵盖的主题： 第1和2节：网络 ... ...在上进行交流的主要基础之一...HTML表格 HTML标题（h1，h2等） HTML列表-ul / ol，嵌套列表 锚标签（以及用于添加信息的href属性-提供链接路径）
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
Pytorch学习笔记——Conv2d与Tensorboard的结合使用
weixin_50765519的博客
05-14 275
Conv2d是深度学习框架中用于执行二维卷积操作的函数或类。它接受输入数据(通常是图像)和卷积核作为参数，输出卷积特征图。这些特征图可以进一步用于分类、检测或其他计算机视觉任务。TensorBoard是一个强大的可视化工具，用于展示深度学习模型的各个方面。它可以展示模型的网络结构、参数分布、训练曲线以及图像、音频等媒体数据。通过使用TensorBoard，能够让研究人员和开发者可以更好地理解和调试模型，从而提高模型的性能和效果。
推荐系统学习笔记（一）
weixin_44880995的博客
05-15 146
同类策略（精排中的两种模型）天然互斥，并且（两条召回通道）效果会相互影响，避免干扰。反转：有的指标立刻影响，有的需要长期观测-------尽快推全也可以长期观测。10%作为holdout桶，实验使用剩余的90%，做diff（需要归一化）不同策略（添加召回通道，优化粗排模型）通常不会干扰，可以作为正交的两层。保留10%，完全不受实验影响，可以考察整个部门对业务指标的贡献。同层互斥----避免一个用户被两个实验影响。不同层正交----每层独立随机分配用户。推全：新层，与其他层正交，90%用户。
并发编程笔记3--synchronize底层实现原理
qq_41056506的博客
05-17 737
Java中每一个对象都可以作为锁，具体的表现为以下3中方式当一个线程试图访问同步代码块时，他必须先获得锁。退出或抛出异常必须释放锁。那么锁到底存在哪里呢？锁中存储的是什么信息呢？从JVM规范中可以看到Synchronize在JVM中的实现原理，JVM是基于进入或退出Monitor对象来实现方法同步和代码块同步，但两者的实现细节不一样。1、代码块同步是使用monitorenter和monitorexit指令实现，2、而方法同步是使用另一种方式实现的，细节在JVM规范中并未详细说明。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
【3dmax笔记】022：文件合并、导入、导出
「 刘一哥与GIS的故事」
05-15 54
3dmax高版本转低版本只能向下转换3个版本，可以选择导出为fbx，解除版本限制。只能合并 max 文件（高版本能够合并低版本模型，低版本不能合并高版本的模型）。导入格式有- - - fbx dwg skp 等等。
Vision Mamba代码笔记
最新发布
Zssss12的博客
05-20 416
事实上Vision Mamba重写了这个Mamba类，可以看到里边是由bimamba_type这个参数的（这其实也是Vision Mamba的主要贡献），执行如下代码。值得说明的一点是，如果你之前在跑其他的mamba，环境拿过来是不能直接直接用的，因为标准的Mamba类是没有bimamba_type这个参数的，所以，需要去Vim代码官网去找到mamba-1p1p1包，下载之后放自己项目里。按照官方readme.md配置，如果有问题照着下面这个链接改。我手敲的带中文注释的链接。
线性回归学习笔记
julyclj55555的博客
05-15 266
换句话说，多元线性回归可以有足够的精确性，但对于该精确性的合理解释会比较难，因为在多个属性中，可能有其中多组子属性的组合都能拟合到近似最优的模型效果，但对不同组的子属性的组合解释，会因为属性不同而有很大区别，这就是统计学家莱奥·布雷曼口中的“罗生门”（Rashomon）。它的值越大代表，拟合的结果越可信；将“罗生门”深挖一步，就是机器学习和统计学在认识论上的差异：统计学讲究的是“知其然，知其所以然”，它不仅要找出数据之间的关联性，还要挖出背后的因果性，给计算出的结果赋予令人信服的解释才是统计的核心。
canvas学习笔记-透明度
m0_51181022的博客
05-17 446
在上面画一系列半径递增的半透明圆。圆叠加得越多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，从中心到边缘部分，背景图会呈现逐渐消失的效果。方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。里所有图形的透明度，有效的值范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。第二个例子和上面的那个类似，不过不是画圆，而是画矩形。可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性。
vue 循环tabs 标签页 组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...
06-06
如果你想根据不同的标签页来显示不同的表格内容，你可以在插槽中使用 v-if 或者 v-show 来判断应该显示哪个表格。例如： ```html <div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ '...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值