HTML学习笔记：（三）表格

最新推荐文章于 2024-05-12 11:55:54 发布
最新推荐文章于 2024-05-12 11:55:54 发布
阅读量1.1k 收藏 30
点赞数 19
分类专栏： HTM学习笔记 文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/137926154
版权

3、表格

（F:\Html\MyHtmls1\table\html_table.html）

<!--表格的使用 -->
<html>
<body>
<p>每个表格由table标签开始</p>
<p>表格边框使用border标签</p>
<p>行由tr标签开始</p>
<p>数据由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>200</td>
</tr>
</table>
<h4>三行四列</h4>
<table border="1">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>

</table>
</body>
</html>

运行效果：
在这里插入图片描述

3.1 表格边框

（F:\Html\MyHtmls1\table\html_table.html）

使用border设置边框宽度

  • 不设置则没有边框
    下图分别为：
    border=“1”、“5”、“15”
    在这里插入图片描述

3.2带表头的表格

（F:\Html\MyHtmls1\table\html_table_withheader.html）

  • 表头使用th标签
<!--带头部的表格 -->
<html>
<body>
<!--水平表头 -->
<table border="1">
<tr>
<th>姓名:</th>
<th>年纪:</th>
<th>性别:</th>
</tr>

<tr>
<td>张三</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
</tr>

</table>
<br >
<!-- 垂直表头 -->
<table border="1">
<tr>
<th>姓名:</th>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<th>年龄:</th>
<td>18</td>
<td>20</td>
</tr>
<tr>
<th>性别:</th>
<td>男</td>
<td>女</td>
</tr>
</table>
</body>
</html>

运行效果：

在这里插入图片描述

3.3 空单元格

  • 使用不添加内容 来实现空单元格
<!--空单元格 -->
<html>
<body>
<table border="1">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td></td>
<td>four</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

3.4 表格标题

  • caption标签实现标题
<html>
<body>
</table>
<!--带标题的表格 + 加粗边框-->
<br >
<table border="5">
<caption>2021年5月工资表</caption>
<tr>
<th>姓名：</th>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<th>工资：</th>
<td>12000</td>
<td>15000</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

3.5 跨行或跨列的表格

  • colspan设置所占表格空间
<!--跨列的单元表格  -->
<table border="1">
<caption>跨列的单元表格</caption>
<tr>
<th>安卓</th>
<th colspan="2">IOS</th>
</tr>
<tr>
<td>文阿花</td>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<br >
<!--跨行的单元表格-->
<table border="1">
<caption>跨行的单元表格</caption>
<tr>
<th>姓名:</th>
<td>文阿花</td>
</tr>

<tr>
<th rowspan="2">电话:</th>
<td>18339995540</td>
</tr>
<tr>
<td>13608694983</td>
</tr>
</table>

运行效果：在这里插入图片描述

3.6 单元格边距

  • 边距使用cellpadding标签
<!--单元格边距 -->
<table border="1" cellpadding="10">
<tr>
<th>姓名：</th>
<td>文阿花</td>
</tr>
<tr>
<th>电话：</th>
<td>18339995540</td>
</tr>
</table>
<br >

运行效果：

在这里插入图片描述

3.7 单元格间距

  • 单元格间距使用cellspacing标签
<!--单元格间距 -->
<table border="2" cellspacing="10">
<tr>
<th>种类：</th>
<td>
<u>
<li>苹果</li>
<li>香蕉</li>
<li>栗子</li>
</u>

</td>
</tr>
<tr>
<th>甜度：</th>
<td>中等</td>
</tr>
</table>

运行效果：

在这里插入图片描述

3.8.1 带背景色的表格

  • 背景色使用bgcolor标签，（但是我是用的note++软件没有改标签的自动提示）
<!--给表格添加背景颜色 -->
<table border="1" bgcolor="yellow" cellpadding="10"  cellspacing="5">
<caption>带背景色的表格</caption>
 <tr>
<th>类型：</th>
<td><table border="1">
<tr>
<td>First</td>
<td>Seconed</td>
</tr>
<tr>
<td>Third</td>
<td>Four</td>
</tr>
</table>
</td>
 </tr>
<tr>
<th>硬度：</th>
<td>中等</td>
</tr>
</table>
<br >

运行效果：
在这里插入图片描述

3.8.2 带背景图像的表格

  • 背景图像使用background标签，在同一文件夹下的直接引用文件名，不同文件夹下的例如：/i/eg_bg_07.gif
<!--给表格添加背景图像  图片如下引用方法原因是 图片和该html文件在一个文件夹下 -->
<table border="1"  cellpadding="10"  cellspacing="5" background="background.jpg">
<caption>带背景图像的表格</caption>
<tr>
<td>First</td>
<td>Seconed</td>
</tr>
<tr>
<td>Third</td>
<td>Four</td>
</tr>
</table>

运行效果：
在这里插入图片描述

3.9 向单元格中添加背景色或图像

  • 在td标签中设置bgcolor或background
<!--向单元表格中添加背景色和背景图片 -->
<table border="1" cellpadding="10" cellspacing="5" >
<caption>带单元格背景的表格</caption>
<tr>
<td bgcolor="yellow">First</td>
<td bgcolor="red">Seconed</td>
</tr>
<tr>
<td background="background.jpg">Third</td>
<td>Four</td>
</tr>

</table>

运行效果：
在这里插入图片描述

3.10 设置单元格内内容位置

<!--向单元格中排列内容 -->
<table border="1" >
<caption>设置单元格内内容的位置</caption>
<tr>
<th align="left" >消费项目...</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$200.00</td>
<td align="right">$200.00</td>
</tr>
</table>

运行效果：
在这里插入图片描述

3.11 框架frame属性

<!--表格框架frame属性 -->
<p><b>注释：</b>frame属性无法在Internet Explorer中正确的显示</p>
<p>Table with frame="box"：</p>
<table frame="box">
<caption>全包</caption>
<tr>
<th>种类：</th>
<td>苹果</td>
</tr>
<tr>
<th>甜度：</th>
<td>中等</td>
</tr>
</table>

<br >
<p>Table with frame="above"</p>
<table frame="above">
<caption>上</caption>
<tr>
<th>种类：</th>
<td>苹果</td>
</tr>
<tr>
<th>甜度：</th>
<td>中等</td>
</tr>
</table>

<br >
<p>Table with frame="below"</p>
<table frame="below">
<caption>下</caption>
<tr>
<th>种类：</th>
<td>苹果</td>
</tr>
<tr>
<th>甜度：</th>
<td>中等</td>
</tr>
</table>

<br >
<p>Table with frame="hsides"</p>
<table frame="hsides">
<caption>上下</caption>
<tr>
<th>种类：</th>
<td>苹果</td>
</tr>
<tr>
<th>甜度：</th>
<td>中等</td>
</tr>
</table>

<br >
<p>Table with frame="vsides"</p>
<table frame="vsides">
<caption>左右</caption>
<tr>
<th>种类：</th>
<td>苹果</td>
</tr>
<tr>
<th>甜度：</th>
<td>中等</td>
</tr>
</table>

运行效果：
在这里插入图片描述

3.12表格内的标签

<!--表格内的标签 -->

<table border="1">
<caption>带各种标签的表格</caption>
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>
<p>这个单元包含一个表格</p>
<table  border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<td>这个单元包含一个列表：
<u>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</u>
</td>
<td>HELLO</td>
<tr>
</tr>
</table>

运行效果：
在这里插入图片描述

文阿花
关注
  • 19
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5学习笔记
m0_61721166的博客
03-08 8832
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
第2章 jQuery的选择器
weixin_30794851的博客
09-30 94
选择器是jQuery的根基 一. 认识 1.CSS常用的选择器 标签选择器，后代选择器，Id选择器，通配符选择器，类选择器，群组选择器——主流浏览器全部支持 伪类选择器，子选择器，临近选择器等等——不是全部被支持 2.jQuery选择器 比如有个 <p class="demo">demo</p> CSS写法是.demo jq写法是$('.demo') 二...
html表格标签
m0_71814235的博客
06-15 61
html表格标签
前端学习笔记：表格篇
Lucifer__hell的博客
01-25 1647
1、创建表格 基础知识： 创建表格的四个元素：table、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束 2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 4、<th>…</th&
超详细的HTML学习笔记：语法特点、骨架结构、基本标签及其属性（附代码示例）
lbcbjtlhmjq的博客
06-04 908
这篇文章是作者通过学习动力节点、黑马程序员的两套不同的HTML课程整理出的学习笔记，融合了两套课程的知识点，耗费了372行代码（加代码注释），希望能帮到大家。HTML只是前端学习的开端，前端学习路漫漫，愿大家学习前端不迷路
h5学习笔记：写一个小表格
夏天的树人的专栏
12-31 2395
1. 前言 2021即将过去了，今年也参与了不少小程序开发。在小程序里面，并没一个比较完善的表格控件。有时候希望有Element 那种table组件，但是在移动端里面展示table，要写完善是很困难，但是通过一些小小样式flex布局。可以简单地模拟一个表格展示效果。仅仅是一个展示的效果。里面用到代码并不多。看如何下。我们先用html代码模拟一下。 2 .搭建一个结构 表格里面要头和身，第一步我们先建立一个简单结构。看如下的效果图。 <!DOCTYPE html> <html> &
HTML学习笔记
m0_65939803的博客
07-16 1969
HTML学习笔记
HTML学习笔记——使用表格
菜鸟的编程之路
09-01 1096
5.1 创建表格 5.1.1表格的基本构成table、tr、td 表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr、列标记td。表格的各种属性都要在表格的开始标记< table>和表格的结束标记< /table>之间才有效。 行：表格中的水平间隔。 列：表格中的垂直间隔。 单元格：表格中行与列相交所产生的区域。 语法： <t...
HTML 学习笔记
OnionZuo的博客
03-19 730
HTML/CSS/JS 前端学习笔记
【前端学习笔记day13】2.9. html表格
01-08
html表格html表格 2.9. html表格 html表格 1、 标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing...
HTML5个人学习笔记
05-27
主要包含各个标签（段落、换行、图像），链接，注释，表格，列表，视频，音频等 适用于初学者，有什么不懂的可以私聊
HTML_CSS学习笔记.docx
07-15
基本的HTML操作，来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 2. HTML5语义化标签 8 2.1. 语义化 8 2.2. ...
Bootstrap基本样式学习笔记之表格(2)
01-21
Bootstrap实现了大量基本样式，包括表格、表单、按钮、图片等。基本的使用方法是通过添加特定的class来实现。 Bootstrap 提供了一个清晰的创建表格的布局。 0x01 表格样式 （1）基本样式：不带边框和分割线： <...
jquery学习笔记二 实现可编辑的表格
12-09
实现可编辑的表格demo： 实例图： 代码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
html--互动星空
stqer的博客
05-08 1084
<!doctype html> <html> <head> <meta charset="utf-8"> <title>互动星空</title> <style> html,body { margin:0; overflow:hidden; width:100%; height:100%; cursor:none; background:black; background:linear-gradient(to
母亲节祝福html源码示例
最新发布
Dalao_zzl的博客
05-12 3148
创建一个完整的HTML页面，我可以为您提供一个简单的HTML模板，其中包含一些示例性的祝福语，并添加一些注释以帮助您理解如何扩展内容。标签内添加更多的祝福语，请注意，由于这是一个简单的示例，您可能需要根据自己的需求进行调整和扩展。这个HTML模板包含一个简单的页面布局，用于向母亲表达节日的祝福。
HTML批量文件上传3—Servlet批量文件处理FileUpLoad
sunbeacher的博客
05-10 1411
基于Servlet实现批量文件上传功能，采用Apache Tomcat、FileUpload1.5版本。实现文件批量上传，进度条控制
HTML_CSS学习：CSS盒子模型
m0_74972727的博客
05-04 751
块元素：1.主题结构标签：<html>、<body>2.排版标签：<h1>-<h6>、<hr>、<p>、<pre>、<div>3.列表标签：<ul>、<ol>、<li>、<dt>、<dd>4.表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>行内元素：1.文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>2.<a>与<label>行内块元素：1.图片：<img>
layui表格监听全选_layui学习笔记——监听表格复选框选择
05-26
在 layui 表格中，可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下： 1. 在表格中添加复选框列，并设置lay-skin属性为primary，表示使用layui风格的复选框。 ``` ... ... ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值