HTML表格标签超级详细

HTML表格

文章目录

• 前言
• 一、表格是什么？
• 二、常用属性
  • 1.<table>常用属性
  • 2.<tr>常用属性
  • 3.<td><th>常用属性
• 三.代码展示

---

前言

表格是网页中十分重要的组成元素。

表格包含表头、行和单元格。

在HTML语言中，表格标记使用符号<table>表示。

定义表格光使用<table>是不够的，还需要定义表格中的行、列等内容。

---

一、表格标签是什么？

<table>是表格 标签。

简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构

其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

二、常用属性

1.<table>常用属性

<table>标记常用属性

属性名	说明
align	设置表格相对周围元素的对齐方式
bgcolor	设置表格的背景颜色
background	设置表格的背景图片
border	设置表格的边框
width	设置表格的宽度
height	设置表格的高度
cellspacing	设置单元格之间的空白间距
cellpadding	设置单元格边缘与其内容之间的间距
bordercolor	边框颜色

2.<tr>常用属性

<tr>标记常用属性

属性名	说明
align	设置表格行的内容对齐方式
valign(三个值：top，middle，bottom)	设置表格行中内容垂直对齐方式
bgcolor	设置表格行的背景颜色
Background	设置表格行的背景图片

3.<td><th>常用属性

<th><td>标记常用属性

属性名	说明
align	设置表格相对周围元素的对齐方式
valign(三个值：top，middle，bottom)	设置表格行中内容垂直对齐方式
top上	middle中           bottom下

bgcolor	,设置表格的背景颜色
width	设置表格的宽度
height	设置表格的高度
rowspan	设置单元格可横跨的行数
colspan	设置单元格可横跨的列数
background	设置表格背景图片

---

三.代码展示

<!-- 表格

            <table></table>--表格标签

            <tr></tr>--行标签

            <td></td>--单元格标签

                属性：

                    宽度：width="**px"

                    高度：height="**px"

                    边框：border="**px"

                    边框颜色：bordercolor="颜色"

                    水平对齐方式：align="left/center/right"

                    垂直对齐方式：valign="top/middle/bottom"

                    背景颜色：bgcolor="颜色"

                    背景图片：background="图片位置/图片名.后缀名"

                    单元格与单元格之间的距离：cellspacing="**px"（默认0px）

                    优先级：td  >  tr  >  table

    -->

    <table border="1" width="300px" height="300px" align="center">

        <tr>

            <td>单元格1</td>

            <td>单元格2</td>

            <td>单元格3</td>

        </tr>

        <tr>

            <td>单元格1</td>

            <td>单元格2</td>

            <td>单元格3</td>

        </tr>

        <tr>

            <td>单元格1</td>

            <td>单元格2</td>

            <td>单元格3</td>

        </tr>

    </table>