W3school html 表格用法总结

于 2021-11-13 14:53:38 发布
阅读量531 收藏 1
点赞数
分类专栏： web 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43156556/article/details/121303626
版权

html 5 表格用法总结

1. 表格标签

表格描述
table定义表格
caption定义标题
th定义表头
td定义单元格

2. 应用实例

  1. 表格边框— "<table border=“1”
<!--1. 没有边框的表格-->
<h3>1.无框表格</h3>
<table>
    <!--tr 表格的行-->
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>
<h3>2.有框表格</h3>
<table border="1">
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>

在这里插入图片描述
2. 表格表头 <th 标签

<h3>3.表格中的表头</h3>
<!--tr表格中每行，th 表格中表头分为横向表头和纵向表头, td 单元格中的内容-->
<table border="1">
    <!--横向表头，表头和数据分开，单独添加在tr中-->
    <tr>
        <th>姓名</th>
        <th>电话</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>灵儿</td>
        <td>000</td>
        <td>007</td>
    </tr>
    <!--纵行表头，和对应的数据放在同一行即tr中-->
    <tr>
        <th>电影</th>
        <td>告白</td>
        <td>画皮</td>
    </tr>
    <tr>
        <th>国家</th>
        <td>韩国</td>
        <td>中国</td>
    </tr>
    <tr>
        <th>类型</th>
        <td>犯罪</td>
        <td>志怪</td>
    </tr>
</table>

在这里插入图片描述
3. 空单元格 &nbsp
设置边框时若单元格为空则不显示空单元格的边框，可以使用 &nbsp 起到占位符的作用

<h3>4.空单元格</h3>
<table border="1">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>for</td>
    </tr>
</table>

在这里插入图片描述

  1. 表格标题 <caption 标签
<h3>5.表格标题</h3>
<table border="2" style="background: coral">
    <caption>表1-5...</caption>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
        <td>400</td>
    </tr>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
        <td>400</td>
    </tr>
</table>

在这里插入图片描述
5. 合并单元格

  • colspan=“2” 横跨两列
  • rowspan=“2” 横跨两行
<h3>6.跨行跨列的单元格</h3>
<table border="1">
    <caption>横跨两列</caption>
    <tr>
        <th>姓名</th>
        <th colspan="2" style="background: aquamarine">电话</th>
    </tr>
    <tr>
        <td>anni</td>
        <td>777</td>
        <td>888</td>
    </tr>
</table>
<table border="1">
    <caption>横跨两行</caption>
    <tr>
        <td>姓名</td>
        <td>anni</td>
        <td>anna</td>
    </tr>
    <tr>
        <th rowspan="2" style="background: coral">电话</th>
        <td>111</td>
        <td>222</td>
    </tr>
    <tr>
        <td>333</td>
        <td>444</td>
    </tr>
</table>

在这里插入图片描述
6. 表格嵌套

<h3>7.表格内的标签</h3>
<!--定义一个两行两列的表格，表格内部插入表格或列表或图片-->
<table border="1">
    <caption>一路向西，后会无期</caption>
    <!--r1-->
    <tr>
        <!--c1 -->
        <td ><p style="background: coral; font-family: 华文行楷;color:black">你最喜欢地方</p></td>
        <!--c2插入表格表格里面插入图片-->
        <td>
            <table border="1">
                <tr>
                    <td>
                        <a name="h1">
                            <img src="img/h1.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                    <td>
                        <a name="h2">
                            <img src="img/h2.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a name="h3">
                            <img src="img/h3.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                    <td>
                        <a name="h4">
                            <img src="img/h4.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--r2-->
    <tr>
        <!--c1-->
        <td>
            <u1>
                <a href="#h1"><li>h1</li></a>
                <a href="#h2"><li>h2</li></a>
                <a href="#h3"><li>h3</li></a>
                <a href="#h4"><li>h4</li></a>
            </u1>
        </td>

        <!--c2-->
        <td><p style="text-align: center">有时间就去看看吧</p></td>
    </tr>
</table>

在这里插入图片描述
7. 单元格边距 单元格内元素到边框的距离

  • cellpadding=“10”
<h3>8.单元格边距</h3>
<table border="1" >
    <caption>没有边距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>
<br/>
<table border="1" cellpadding="10">
    <!--cellpadding 创建单元格内容与其边框之间的空白-->
    <caption>有边距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>

在这里插入图片描述
8. 单元格间距

  • cellspacing=“10”
<h3>9.单元格间距</h3>
<!--cellspacing 单元格之间的距离-->
<table border="1" >
    <caption>没有间距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>
<br/>
<table border="1" cellspacing="10">
    <!--cellpadding 创建单元格内容与其边框之间的空白-->
    <caption>有间距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>
<br/>

在这里插入图片描述
9. 单元格对齐 align

<h3>10.单元格数据对齐方式</h3>
<table border="1" width="200"style="border: black;background: coral">
    <caption>通过 align 设置对齐方式</caption>
    <tr>
        <th align="left">消费项目</th>
        <th align="right">一月份</th>
        <th align="right">二月份</th>
    </tr>
    <tr>
        <th align="left">衣服</th>
        <td align="right">&yen200</td>
        <td align="right">&yen300</td>
    </tr>
    <tr>
        <th align="left">食物</th>
        <td align="right">&yen320</td>
        <td align="right">&yen400</td>
    </tr>
    <tr>
        <th align="left">总计</th>
        <td align="right">&yen520</td>
        <td align="right">&yen700</td>
    </tr>
</table>
<br/>

在这里插入图片描述
10. frame 属性

  • frame 控制表格边框
<h3>11.frame控制表格边框</h3>
<table frame="box">
    <caption>frame="box"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>&yen100</td>
    </tr>
</table>
<br/>
<table frame="above">
    <caption>frame="above"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>&yen100</td>
    </tr>
</table>
<br/>
<table frame="below">
    <caption>frame="below"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>&yen100</td>
    </tr>
</table>
<br/>
<table frame="hsides">
    <caption>frame="hsides"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>&yen100</td>
    </tr>
</table>
<br/>
<table frame="vsides">
    <caption>frame="vsides"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>&yen100</td>
    </tr>
</table>

在这里插入图片描述

3. 总结

  1. 表格边框
    在这里插入图片描述

  2. 表格表头
    在这里插入图片描述
    在这里插入图片描述

  3. 空单元格
    在这里插入图片描述

  4. 表格标题
    在这里插入图片描述

  5. 合并单元格
    在这里插入图片描述
    在这里插入图片描述

  6. 表格嵌套
    在这里插入图片描述

  7. 单元格边距
    在这里插入图片描述

  8. 单元格间距
    在这里插入图片描述

  9. 单元格对齐
    在这里插入图片描述

  10. frame属性
    在这里插入图片描述v
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

执霜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTNL常见的标签及属性 和w3school的使用
m0_45259333的博客
08-11 822
HTNL常见的标签及属性 和w3school的使用 一总结HTML的常用标签及其作用 1.b标签：加粗 2.u标签：下划线 3.i标签：斜体 4.a标签：超链接标签 href：引入的是资源 可以是网络资源或者是本地资源 还有target属性_blank是空白页 _self 是在原来的这个页面进行展示 5.Iframe标签：当前网页的某个区域显示其他的资源 注意：加载的资源是两种不同的资源 相互独立 只是在本页中放了一个网页 类似于画中画的形 6.div标签：是一种布局 Frameset是多个网.
W3School离线手册(2015.01.26)高清完整chm版
01-26
W3School离线手册(2015.01.26) W3School离线手册更新： 该文档为本人于2015年2月26日下午从W3School官网下载整理制作的CHM电子书文档。 1）要是有些人碰到chm打开空白的（因为chm未解锁，通常可以打开chm但显示无法...
W3School-CSS 表格实例
weixin_30415113的博客
01-02 178
CSS 表格实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline） 实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Po...
摘自w3school的html标签内容——表格标签
wzt2017l的博客
04-01 342
1： 定义表格                        属性：border 规定表格边框的宽度                                     cellpadding 规定单元边沿与其内容之间的空白                                     cellspacing 规定单元格之间的空白
table的设置（w3c）
perfecterr的博客
08-19 250
&lt;td width='10px' style=' font-size: 12px;'&gt; //设置table的宽度 ，以及字体的大小 可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset. 属性 值 描述 DTD align left center right ...
html标签和表格
最爱喝怡宝的博客
08-02 94
<h1>—<h6>为标题标签,例如<h1>这是一个标题</h1><h2>这是一个标题</h2> <h1>标签字体最大，用作最重要的标题，<h2>其次，随后是<h3-h6> <p>这是一个段落</p>，段落标签，<p>标签会自动分行 <hr>水平分割线标签 <br>换行标签 <!--...--> 注释标签，可以将注释插入
W3School离线手册中文版（web前端）
07-05
1．完整的网站技术参考手册 2. 实例测试工具 3.行为快捷易懂的学习方式 -从基础的HTML到CSS,乃至XML,SQL,JS,PHP和ASP.NET成熟的完备教程
W3School离线手册2018.chm
02-14
www.w3school.com.cn的离线chm W3School离线手册2018.11.chm
w3school离线手册20191204.chm 2019最新版
12-11
2019最新版w3school离线手册， 2019-12-04下载的数据制作。 tiy试一试实例都能打开，极少数几个CSS实例样式解析会出错。 改了近一个星期，实在是没精力去制作的完美无缺。
W3School离线指导.chm
10-11
在 w3school，你可以找到你所需要的所有的网站建设教程。 从基础的 HTML 到 CSS，乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。 从左侧的菜单选择你需要的教程！ 完整的网站技术参考手册 完整的网站技术参考手册 ...
支持本地TIY功能的W3School离线CHM包
06-23
http://www.w3school.com.cn是一个包罗万有的网站建设教程，其特点是简洁、全面、易用，是日常参考和学习提升的极佳途径。其中最常用的功能要数其TIY（Try It Yourself - 亲自试一下）功能了，用户在TIY代码框内对代码或脚本的修改无需保存为一个或多个文件就可以实时在线查看其效果，此可谓w3school的精华功能。 网上有不少“好事者”抓站打包的W3School离线CHM包，基本上保留了其教程的大部分功能，但当用户处于离线状态时，其TIY功能就失效了。虽然现在3G网络无处不在，但我们仍然无法保持时时刻刻在线，如何满足这种情况下的离线TIY需求、达到学习效果呢？经对http://www.w3school.com.cn原TIY功能分析，采用Javascript本地代码改造其基于asp的TIY功能，保留其原有全部教程，改造TIY页面数千个，修改代码逾万行，原汁原味、卓尔不凡，一切尽在：支持本地TIY功能的W3School离线CHM包
摘自w3school的html标签内容——框架标签
wzt2017l的博客
03-24 530
1: 定义 frameset 中的一个特定的窗口（框架）每个框架都可以设置不同的属性。              属性：1 frameborder  规定是否显示框架周围的边框 值0、1                        2：longdesc 规定一个包含有关框架内容的长描述的页面                        3：marginheight 定义框架上方和下方的边
html5表格w3c,CSS Table (表格)
weixin_39724266的博客
06-20 156
CSS 表格使用 CSS 可以大大提高 HTML 表格的外观。2020年11月2019年11月程序语言等级更改1216.21%+0.17%2312.12%+2.27%3111.68%-4.57%457.60%+1.99%554.67%+0.36%664.01%-0.22%772.03%+0.10%881.79%0.07%9161.64%+0.66%1091.54%+0.15%实例#customer...
mysql创建table w3c_MySQL 创建数据表
weixin_39831239的博客
01-19 102
MySQL 创建数据表创建MySQL数据表需要以下信息： 表名表字段名定义每个表字段语法以下为创建MySQL数据表的SQL通用语法： CREATE TABLE table_name (column_name column_type);以下例子中我们将在 W3CSCHOOL 数据库中创建数据表w3cschool_tbl： tutorials_tbl(tutorial_id INT NOT NULL ...
w3 html table,W3.CSS Tables (表)
weixin_35732670的博客
06-18 243
W3.CSS 为表提供以下类：类定义w3-tableHTML 表的容器w3-striped条纹表w3-border边框表w3-bordered边框线w3-centered居中表格内容w3-hoverable悬停表w3-table-all所有属性集基本表w3-table类用于显示一个基本表中：实例名字姓氏年龄吉尔史密斯50尝试一下 »点击“尝试一下”按钮查看在线实例条纹表w3-striped类用...
W3C笔记－CSS巧妙设置table边框border的样式
热门推荐
student4java的专栏
12-08 1万+
<br />CSS巧妙设置table边框border的样式<br />虽然这个也不是什么新鲜话题了，但发现还有很多人不会用，作个记录，顺便简化下样式，供大家直接复制使用吧～！<br />其实也挺简单的，为了使上、下、左、右边框设置不重复，只需将它们分开设置。table标签样式设置left,bottom;td标签设置right,top。<br />具体操作如下：<br />首先，定义全局样式，stlye中写入table及td的边框样式：<br /><style type="text/css"><br />ta
HTML之完整的table结构
皮一下很开心的猴头
07-30 7924
&lt;table border="1" cellpadding="0" cellspacing="0" width="200"&gt; &lt;thead&gt; &lt;tr style="background-color: gray;"&gt; &lt;th&gt;Month&lt;/th&g
w3school网站
最新发布
09-24
w3school网站是一个提供关于Web开发技术的在线教程的网站。它包含了HTML、CSS、JavaScript等方面的学习资料和实例代码，可以帮助用户学习和提升这些技术的应用能力。w3cschool网站也是一个类似的网站，提供了类似的教程和学习资源。两个网站都是为了免费服务大众，但w3cschool是应w3c中国组织官方而出的，而w3school是上海赢科投资有限公司进行投资的，但是是为了协助w3c中国组织而出的。因此，w3c官方更具权威性。另外，w3c实例更多且保持更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值