HTML-表格-属性

于 2024-05-06 01:33:15 发布
阅读量142 收藏 1
点赞数 6
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73839298/article/details/138470034
版权
本文详细介绍了HTML中表格元素的各种属性，如border用于设置边框，cellpadding控制单元格内的空间，cellspacing指定单元格间的距离，bgcolor指定背景颜色，background设置背景图片，width和height定义表格尺寸，以及align（现已过时）控制文本对齐。
摘要由CSDN通过智能技术生成

表格属性

  • boder:指定表格添加边框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框

    注意！
          在HTML5中border属性已经被认为是过时了的，推荐使用CSS设置表格的边框，了解即可。
-->
  • cellpadding:指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1" cellpadding="10">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框

    cellpadding：指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）
-->
  • cellspacing：指定表格单元格与单元格的距离

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1" cellpadding="10" cellspacing="10">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框
    cellpadding：指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）

    cellspacing：指定表格单元格与单元格的距离
-->
  • bgcolor：指定表格的背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1" cellpadding="10" cellspacing="10" bgcolor="yellow">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框
    cellpadding：指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）
    cellspacing：指定表格单元格与单元格的距离

    bgcolor：指定表格的背景颜色

    注意！
          在HTML5中bgcolor属性已经被认为是过时了的，推荐使用CSS设置表格的背景颜色，了解即可。
-->
  • background：指定表格的背景图像

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1" cellpadding="10" cellspacing="10" bgcolor="" background="img/landscape.png">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框
    cellpadding：指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）
    cellspacing：指定表格单元格与单元格的距离
    bgcolor：指定表格的背景颜色

    background：指定表格的背景图像

    注意！
          background是指定表格的背景图像的适用于整个表格(table)，同样适合表格单元格(td)单独设置
-->
  • width和height：指定表格的宽度和高度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1" cellpadding="" cellspacing="" bgcolor="" background="" width="200px" height="100px">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框
    cellpadding：指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）
    cellspacing：指定表格单元格与单元格的距离
    bgcolor：指定表格的背景颜色
    background：指定表格的背景图像

    width：指定表格的宽度
    height：指定表格的高度
-->
  • align：指定表格元素文本内容的对齐方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  <table border="1" cellpadding="" cellspacing="" bgcolor="" background="" width="200px" height="100px">
    <caption>个人信息表</caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr align="left">
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr align="center">
        <td>小红</td>
        <td>19</td>
        <td>女</td>
      </tr>
      <tr align="right">
        <td>小黄</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>
<!-- 
    表格：table
    表格行：tr (——)
    表格标题：caption
    表格表头：th
    表格单元格：td
    
    表格单元格空格：&nbsp

    表格的页眉：thead
    表格的主体：tbody
    表格的页脚：tfoot

    border：指定表格添加边框
    cellpadding：指定表格单元格与边框的距离，单元格内上下左右的空间距离，类似于内边距（padding）
    cellspacing：指定表格单元格与单元格的距离
    bgcolor：指定表格的背景颜色
    background：指定表格的背景图像
    width：指定表格的宽度
    height：指定表格的高度

    align：指定表格元素文本内容的对齐方式

    注意！
          align是指定表格元素文本内容的对齐方式，适应于整个表格(table),同样适应于表格单元格(td)单独设置，在HTML5中已过时，了解即可
-->

Jealous_-
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单表格CSS-HTML
02-16
总之，掌握HTML表格和CSS样式是网页设计的基础，通过学习和实践，你可以创建出各种复杂且富有视觉吸引力的表格，满足不同场景的需求。这个教程提供了一个起点，进一步深入，你还可以探索表格的交互性、响应式设计...
html表格属性
05-23
html表格属性，学习；你能通过这文档清楚了解html表格的用法！
前端HTML<table>标签的属性和使用
热门推荐
冯小东
10-05 4万+
1.什么是表格&表格的作用 什么是表格：由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的 表格的作用：以一定的结构来显示信息的。  2.如何使用表格 定义表格： 创建表行： 创建列(单元格):  注意：默认情况下，每行中的列数是统一的。 table : display:table; 特点： 1、独占一行 2、宽度自适应(
深入了解表格的属性
weixin_30295091的博客
04-18 282
表格是网页制作时最常使用的元素了，可以说，大部分的网页都是由表格支撑的，没有表格的网页绝对是不完美的，也不可能做的非常漂亮。但是长期以来，表格的使用可以说都没有发挥它的最大作用，这是因为大家对表格的属性了解还不够透彻。看完下面的介绍，原来一直困扰你的问题也许一下子就非常简单地解决了，最起码可以使你制作时更加方便...... 一、表格的常用属性基本属性有：width（宽度）、height（高度）、b...
关于HTML表格属性详解
ofshitao的博客
07-18 3669
表格 表格< table>标签中属性有 属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替） bgcolor 颜色名字或颜色二进制代码 规定表格的背景颜色。（不推荐使用，用样式代替） border 1或者其他" " 规定表格单元是否拥有边框，默认为" "，表示没有边框。 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。 cellspacing 像素值 规定单元格
html表格及其属性
唐三十胖子的博客
06-03 1700
表格属性：align  cellspacing  cellpadding  width  height  border  (frame控制表格边框最外面四条线框 role控制单元格之间的分割线） 表格的显示位置：”center”> 单元格之间的间距：”2px”> 单元格内与边框距离：”2px”> 标题属性： align表示放在表格的位置 例如:caption align=”top
HTML-表格基本属性
m0_52047345的博客
07-18 155
表格的总结： 标签 属性 <table></table> 表格 width：宽度 <tr></tr> 行 height：高度 <td></td> 单元格 cellspacing:单元格与单元格之间的距离 <th></th> 表头 加粗 加黑 自动居中 cellspadding：单元格与内容之间的距离 <caption>&l...
HTML笔记：表格属性介绍
三桥君
12-07 719
表格标签 caption：表格标题 table：表格内容 tr：若干行 th：表头的表列 td：表体的表列 语义化标签： thead：表头内容 tbody：表体内容 tfood：表尾内容 注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。 如何使表格框线没有间距，变为实心线？ 在table标签中加 border=“1” <table border="1" cellpadding="10" cellspacing="20"> 如何定义表格尺寸？ 在tab
html表格有什么属性,一篇文章带你了解HTML表格及其主要属性介绍
weixin_42637593的博客
06-07 2025
一、定义一个HTML表格使用标签定义HTML表格。标签定义表中的每一行使用。使用标签定义表头。默认情况下，表标题是粗体和居中的。一个表的数据/单元使用 标签定义。FirstnameLastnameAgeJillSmith50EveJackson94> 注意: 元素是表的数据容器。它们可以包含所有的HTML元素; 文本、图像、列表、其他表格等。1. HTML表格 - 添加边框如果不指定表的边框...
html table 属性 php,HTML表格属性有哪些？HTML表格10种基本属性的总结
weixin_34981697的博客
04-05 529
HTML表格属性设置在HTML网页中的应用是十分广泛的，也是至关重要的，所以，接下来的这篇文章我给大家分享了总结的HTML表格10种基本属性，下面我们来分别看一看这10种表格属性的介绍以及具体的代码。1、HTML table属性用来定义HTML的表格，具有本地属性 border 表示边框，border属性的值必须为1或空字符串("")。该属性不会控制边框的样式，而是由CSS来控制table元素可以...
layui-高级表格-soul-table功能-HTML源码
10-02
在IT行业中，HTML表格是网页布局中不可或缺的一部分，尤其在数据展示时，高效且美观的表格设计至关重要。layui是一款优秀的前端框架，它以其简洁、强大的特性受到开发者的喜爱。而soul-table是layui的一个扩展组件，...
头歌教学实践平台 Web前端开发基础 HTML-表格
01-20
HTML表格由`<table>`标签定义，其中包含`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`（数据单元格）等元素。一个简单的表格结构如下： ```html 表头1 表头2 数据1 数据2 ``` `th`元素用于...
038HTML-DOM对象.doc
11-30
Table 对象代表一个 HTML 表格，在 HTML 文档中，<table> 标签每出现一次，一个 Table 对象就会被创建。Table 对象的常用属性有： * cells：返回包含表格中所有单元格的一个数组 * rows：返回包含表格中所有行的一...
html中table边框属性
weixin_34235371的博客
12-28 566
1.向右（横向）合并： &lt;td colspan="5"&gt;&lt;span&gt;后台管理系统&lt;/span&gt;&lt;/td&gt; 2.向下（纵向）合并： &lt;td rowspan="5"&gt;&lt;span&gt;后台管理系统&lt;/span&gt;&lt;/td&gt; 3.合并边框线（为表格设置合
表格代码、标签及属性
zlxfogger的专栏
01-09 1187
表格代码、标签及属性    表格标签属性 表格通用格式： 文字或图片 表中元素 表格标签属性：     align="水平对齐"：   center 中    left  左         right 右            valign="垂直对齐"： top  上       middle：中   bottom 下     background="背景图案"
html标签之表格标签，前端应用性能优化，【建议收藏】
m0_57472099的博客
03-19 1027
7）border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；
html: 表格边框的设置
陶匠一路跑
11-14 4365
如果直接将table中的border置1，则表格的边框大于1。可以写两个table，一个作为背景，其背景颜色就是我们所有的边框颜色；另一个表格border="0" cellpadding="0" cellspacing="1"，可实现想要的结果：table border="0" cellspacing="0" cellpadding="0">  tr>    td bgcolor="#00
HTML重要标签重点及属性（表格表单列表）——之转生在异世界学前端
最新发布
duyan0828的博客
04-09 1475
表格结构标签有（表格的头部区域一般是th）和（表格的主体区域一般是td）合并单元格的属性行合并rowspan="合并个数" 列合并colspan="合并个数"dl里面只能放dt,dd两个标签dt和dd没有数量限制一般是一个dt带多个dd。里面只能放li，li里面可以放任何标签使用跟ul一样。td是用来定义表格的列，th是表头一般只有一个表头会加粗。里面只能放li标签，li标签里面可以放任何标签。thead必须有tr标签，两个都是双标签。
学习HTML5基础知识-表格与列表布局，掌握表格结构及属性应用。
PPT中介绍了一些常见的表格属性，包括表格边框、表头、标题等。通过设置这些属性，可以使表格更加具有结构化和可读性。例如，可以通过设置`border`属性来定义表格的边框宽度，使用`<th>`标签来定义表头，使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值