Html- html表格

最新推荐文章于 2023-09-13 17:28:19 发布
最新推荐文章于 2023-09-13 17:28:19 发布
阅读量745 收藏 4
点赞数
分类专栏： # HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxy1625309592/article/details/109559872
版权

基本标签

<table> 表格
<tr> 行
<td> 单元格
<th></th> 表格头，内容居中，加粗显示
<caption></caption> 表格标题，居中显示

基本语法

<!– 表格开始 -->
<table>
    <!– tr 行标签 -->
    <tr>
        <!– td 单元格 -->
        <td>……</td>
    </tr>
    <tr>
        <td>……</td>
    </tr>
    <!– 表格结束 -->
</table>

代码示例(两行三列的表格)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格标签的基本使用</title>
</head>
  <body>
    <!--创建2行3列表格 -->
    <table border="1">
      <tr>
        <td>科比</td>
        <td>欧文</td>
        <td>老詹</td>
      </tr>
      <tr>
        <td>8</td>
        <td>2</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

执行结果

​

表格结构

表格划分三部分：表头、主体、脚注。

  • thead：表格的头 （放表格的表头）
  • tbody：表格的主体 （放数据本体）
  • tfoot：表格的脚 （放表格的脚注）

语法

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

<!--
	caption作用: 指定表格的标题
	thead作用: 指定表格的表头信息
	tbody作用: 指定表格的主体信息
	tfoot作用: 指定表格的附加信息
-->

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格结构</title>
</head>
<body>
  <table border="1px" width="200px" height="200px">
    <caption>学生信息</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>20</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>40</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>2</td>
        <td>30</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

执行结果

​

table属性

属性值描述
widthpixels、%规定表格的宽度
alignleft、center、right表格相对周围元素的对齐方式
borderpixels规定表格边框的宽度
bgcolorrgb(x,x,x)、#xxxxxx、colorname表格的背景颜色
cellpaddingpixels、%单元边沿与其内容之间的空白
cellspacingpixels、%单元格之间的空白
frame属性值规定外侧边框的那个部分是可见的
rules属性值规定内侧边框的哪个部分是可见的

标签属性

tr标签
属性值描述
alignalign、Left、center、right、justify、char行内容的水平对齐
valigntop、middle、bottom、baseline行内容的垂直对齐
bgcolor•rgb(x,x,x)
•#xxxxxx
• colorname
行的背景颜色。
td和th标签
属性值描述
alignLeft、center、right、
justify、char		单元格内容的水平对齐
valigntop、middle、bottom、
baseline		单元格内容的垂直对齐
bgcolor• rgb(x,x,x)
• #xxxxxx
• colorname		单元格的背景颜色
width• %
• pixels		单元格的宽度
height%
• pixels		单元格的高度
thead和tbody和tfoot标签
属性值描述
alignLeft、center、right、justify、char
valigntop、middle、bottom、baseline
、和 内容的水平对齐、和 内容的垂直对齐

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格标签</title>
</head>
  <body>
    <table bgcolor="black" cellpadding="1px" width="800px" align="left">
      <caption>
        <h3>今日影视剧排行榜</h3>
      </caption>
      <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七天</th>
        <th>相关链接</th>
      </tr>
      <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">琅琊榜</td>
        <td>
          <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
          <a href="#">腾讯视频</a>
          <a href="#">优酷视频</a>
          <a href="#">爱奇艺</a>
        </td>
      </tr>
      <tr bgcolor="white" align="center">
        <td>2</td>
        <td align="left">风筝</td>
        <td>
          <img src="images/up.jpg">
        </td>
        <td>623538</td>
        <td>4088290</td>
        <td>
          <a href="#">腾讯视频</a>
          <a href="#">优酷视频</a>
          <a href="#">爱奇艺</a>
        </td>
      </tr>
      <tr bgcolor="white" align="center">
        <td>3</td>
        <td align="left">以父之名</td>
        <td>
          <img src="images/down.jpg">
        </td>
        <td>623557</td>
        <td>4088231</td>
        <td>
          <a href="#">腾讯视频</a>
          <a href="#">优酷视频</a>
          <a href="#">爱奇艺</a>
        </td>
      </tr>
      <tr bgcolor="white" align="center">
        <td>4</td>
        <td align="left">陆战之王</td>
        <td>
          <img src="images/down.jpg">
        </td>
        <td>613557</td>
        <td>4058311</td>
        <td>
          <a href="#">腾讯视频</a>
          <a href="#">优酷视频</a>
          <a href="#">爱奇艺</a>
        </td>
      </tr>
      <tr bgcolor="white" align="center">
        <td>5</td>
        <td align="left">外交风云</td>
        <td>
          <img src="images/up.jpg">
        </td>
        <td>623211</td>
        <td>4087011</td>
        <td>
          <a href="#">腾讯视频</a>
          <a href="#">优酷视频</a>
          <a href="#">爱奇艺</a>
        </td>
      </tr>
    </table>
  </body>
</html>

执行结果

​

单元格合并

跨列属性colspan
<table>
    <tr>
        <td colspan=“2”>…</td>
        <td>…</td>
    </tr>
    <tr>
        <td>…</td>
        <td>…</td>
        <td>…</td>
    </tr>
</table>
跨行属性rowspan
<table>
    <tr>
        <td>…</td>
        <td rowspan=“2”>…</td>
        <td>…</td>
    </tr>
    <tr>
        <td>…</td>
        <td>…</td>
    </tr>
</table>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单元格合并</title>
</head>
  <body>
    <!--水平方向上合并-->
    <table bgcolor="black" width="200px" height="200px" align="left">
      
      <tr bgcolor="white">
        <td colspan="2"></td>
        <!--<td></td>-->
        <td></td>
      </tr>
      <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr bgcolor="white">
        <td></td>
        <td colspan="2"></td>
        <!--<td></td>-->
      </tr>
    </table>
    
    <!--垂直方向合并-->
    <table bgcolor="black" width="200px" height="200px" align="center">
      <tr bgcolor="white">
        <td rowspan="2"></td>
        <td></td>
        <td></td>
      </tr>
      <tr bgcolor="white">
        <!--<td></td>-->
        <td></td>
        <td></td>
      </tr>
      <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
</body>
</html>
执行结果

​

guardwhy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Html 表格使用
newone77的博客
03-18 399
一、基本使用： 1.表的构造： table caption标题 colgroup(width）列组：定义列样式，class或style，注意span不会合并单元格，只代表跨多少列样式 col(width)列：定义列样式，非闭合标签 thead表眉：默认垂直居中加粗样式 tr-td(colspan rowspan)tr为表行table row，td为单元格table data，cols......
HTML表格表单
qq_55636063的博客
05-08 1587
HTML表格表单
html表格制作10*10,练就HTML降龙十八掌-[10-表格属性-下]
weixin_42191359的博客
06-24 535
[练就HTML降龙十八掌]10-表格属性-下第一时间查看更新请关注微信公众号“August精彩编程”。上一篇：HTML表格属性-上10.1-上一章节我们了解了HTML表格的属性，本章我们讲解HTML表格跨行跨列。10.2-HTML的表格跨行和跨列如何做呢？我们先讲下什么是跨行跨列，相信大家都很熟悉Office的Excel表格，这个电子表格就有很强大的表格处理功能，也能行列合并，HTML表格跨行跨列...
Html表格结构
pijiuxiaolongxia的博客
03-21 331
html表格基础
html写出带有表格标题的三行三列表格
Shivy_的博客
01-14 5084
介绍 HTML里，可以使用 table 标签及它内部的属性 tr,td,th等就可以快速生成一个表格。具体如下： 效果图 相关属性介绍 一个简单的 HTML 表格由table元素以及一个或多个 tr、th 或 td元素组成。 <caption> 标签： 定义表格的标题，必须直接放置到 <table>标签之后 <tr> 标签： 定义表格的一行 <th> 标签： 定义表格的表头，以粗体的形式显示 <td> 标签： 定义单元格标签 代码 &lt
html三行两列布局,div+css经典三行两列布局
weixin_36429993的博客
06-20 3211
写在前面在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：代码闲来无事，就自己动手实现了一下，代码如下：1 23 4 5 6 首页7 8 * {9 margin: 0;10 padding: 0;11 ...
用HTML标签写一个2*3的表格,表格标签 - HTML教程 - 一点教程
weixin_36080842的博客
06-20 1159
表格标签我们可以将表格想象为网格，表由行和列组成。标记表示表格,以开始以结束标题标签,给表格提供标题。 表头标签 一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。 行标签 单元格标签, 加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。一、简单的表格 姓名 年龄 张三 23 效果：二、table的border属性我们可以做在table中使用 bord...
html-表格-漂亮.pdf
11-18
html-表格-漂亮.pdf
08-表格案例.html
12-19
08-表格案例.html
简单表格CSS-HTML
02-16
总之，掌握HTML表格和CSS样式是网页设计的基础，通过学习和实践，你可以创建出各种复杂且富有视觉吸引力的表格，满足不同场景的需求。这个教程提供了一个起点，进一步深入，你还可以探索表格的交互性、响应式设计...
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
layui-高级表格-soul-table功能-HTML源码
10-02
在IT行业中，HTML表格是网页布局中不可或缺的一部分，尤其在数据展示时，高效且美观的表格设计至关重要。layui是一款优秀的前端框架，它以其简洁、强大的特性受到开发者的喜爱。而soul-table是layui的一个扩展组件，...
html-table表格
06-17
优化了下table表格
HTML表格
qq_62881798的博客
01-03 824
1.基本属性 <!-- border 设置边框线的粗细 --> <!-- tb 表标题 --> <!-- colspan 后面的数字是多少就包括多少列--> <!-- rowspan 后面的数字是多少就包括多少行--> <!-- caption 表头--> 2.不会跨行的表格（基本表格） <table border="2"> 1.不会跨行的...
html三行两列列表,DIV+CSS三行两列经典布局
weixin_29807369的博客
06-05 2585
开抢了！双11创业者优选服务！这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在《网页设计师 》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在原代码的基础上作了一定规范整理)：SEO参考:XHTML之经典三行两列布局- seobbs.netbody {background: #999;text-align:...
如何使用HTML做一个表格
2301_76390945的博客
09-13 1256
`元素来定义表头单元格的内容。在接下来的两个`<tr>`元素中，我们使用`<td>`元素来定义普通单元格的内容。在上面的示例中，我们使用`<table>`元素来创建一个表格。`<tr>`元素表示表格的行，`<th>`元素表示表头单元格，`<td>`元素表示普通单元格。<title>表格示例</title><th>姓名</th><th>年龄</th><th>性别张三</td><td>李四</td><td>男</td><td>女
chatgpt赋能python：Python两行三列列表：更高效的数据展示方式
「 虚幻私塾」
05-29 880
Python两行三列列表是指将一系列数据按照两行三列的形式排列显示，而不是传统的竖直列表展示。[3, 4, 5],[6, 7, 8],[9]]本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是。
表格标签——HTML5学习笔记（5）
Enuyinx的博客
10-27 379
HTML5中的表格标签
html css js网页设计
最新发布
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值