未分类 · 2023年3月24日 0

HTML表格【】

HTML 表格


表格由

标签来定义。每个表格均有若干行(由

标签定义),每行被分割为若干单元格(由

标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格生成器:https://c.runoob.com/front-end/7688/

HTML 表格实例:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67


在线实例

实例

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

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

h4>两行三列:h4>
table border="1">
tr>
td>100td>
td>200td>
td>300td>
tr>
tr>
td>400td>
td>500td>
td>600td>
tr>
table>

尝试一下 »(可以在本页底端找到更多实例。)

表格实例

实例

table border="1">
tr>
td>row 1, cell 1td>
td>row 1, cell 2td>
tr>
tr>
td>row 2, cell 1td>
td>row 2, cell 2td>
tr>
table>

在浏览器显示如下::


HTML 表格和边框属性

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

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

实例

table border="1">
tr>
td>Row 1, cell 1td>
td>Row 1, cell 2td>
tr>
table>

HTML 表格表头

表格的表头使用

标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:

实例

table border="1">
tr>
th>Header 1th>
th>Header 2th>
tr>
tr>
td>row 1, cell 1td>
td>row 1, cell 2td>
tr>
tr>
td>row 2, cell 1td>
td>row 2, cell 2td>
tr>
table>

在浏览器显示如下:


更多实例

没有边框的表格
本例演示一个没有边框的表格。

表格中的表头(Heading)
本例演示如何显示表格表头。

带有标题的表格
本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

表格内的标签
本例演示如何在不同的元素内显示元素。

单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
漂亮的表格


HTML 表格标签

这个标签就是放在三间房子里面的东西,每一个

就是表格一行。
表格的每一行被分为一个个单元格。
每一个单元格就是用来存放数据的,这个数据分为两种:一,数据的名称;二,数据本身。

表示数据的名称(标题) ,

表示真正的数据内容。

一个简单实例:

Dichter

   Dichter

  328***8204@qq.com

  参考地址

6年前 (2017-07-12)

  • #0

       CHINA陈

      252***4754@qq.com

    373

    表格三要素 table、tr、td 缺一不可。

  • 标签 描述

    定义表格
    定义表格的表头

    定义表格的行
    定义表格单元

    定义表格标题

    定义表格列的组

    定义用于表格列的属性

    定义表格的页眉

    定义表格的主体

    定义表格的页脚

    7 篇笔记
    写笔记

    标签常用属性:

    border="1"   表格边框的宽度
    bordercolor="#fff"   表格边框的颜色
    cellspacing="5"   单元格之间的间距
    width="500"   表格的总宽度
    height="100"   表格的总高度
    align="right"   表格整体对齐方式    (参数有  left、center、right)
    bgcolor="#fff"   表格整体的背景色
    
    标签的常用属性:

    bgcolor="#fff"    行的颜色
    align="right"    行内文字的水平对齐方式    (参数有left、center、right)
    valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)
    标签的常用属性:

    width="500"    单元格的宽度,设置后对当前一列的单元格都有影响
    height="100"   单元格的高度,设置后对当前一行的单元格都有影响
    bgcolor="fff"  单元格的背景色
    align="right"  单元格文字的水平对齐方式    (参数left、center、right)
    rowspan="3"    合并垂直水平方向的单元格
    colspan="3"    合并水平方向单元格
    valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top) 

    引号里的数字和颜色代码均可以更改。

    CHINA陈

       CHINA陈

      252***4754@qq.com

    4年前 (2019-09-25)

  • #0

       猪八戒

      996***933@qq.com

    85
    表格结构语义标签:


  • 打赏 赞(0) 分享'
    分享到...
    微信
    支付宝
    微信二维码图片

    微信扫描二维码打赏

    支付宝二维码图片

    支付宝扫描二维码打赏

    文章目录