HTML5-3-表格

文章目录

属性
边框属性
标题
跨行和跨列
单元格边距

HTML 表格由标签来定义。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

<table>
     <tr>
         <td>单元格1td>
         <td>单元格2td>
     tr>
     <tr>
         <td>单元格3td>
         <td>单元格4td>
     tr>
table>
1
2
3
4
5
6
7
8
9
10

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

thead、tbody和tfoot这3个标签。将表格划分为3部分：表头、表身、表脚。

用于定义表格的标题部分: 在中，使用用于定义表格的主体部分: 在中，使用元素定义行，并在每行中使用

元素定义列的标题

元素定义单元格数据

<table> 
    <caption>表格标题caption>
    
    <thead>
        <tr> 
           <th>表头单元格1th>
           <th>表头单元格2th>
        tr>
    thead>
    
    <tbody>
       <tr>
          <td>表行单元格1td>
          <td>表行单元格2td>
       tr>
    tbody>
    
    <tfoot>
       <tr>
          <td>标准单元格5td>
          <td>标准单元格6td>
       tr>
    tfoot>
table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

表脚往往用于统计数据。此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用：方便分块来控制表格的CSS样式。

属性

在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。

属性	值	描述
align	left，center，right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)，#xxxxxx，colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	pixels，%	规定单元边沿与其内容之间的空白。
cellspacing	pixels，%	规定单元格之间的空白。
frame	void，above，below，hsides，lhs，rhs，vsides，box，border	规定外侧边框的哪个部分是可见的。
rules	none，groups，rows，cols，all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	%，pixels	规定表格的宽度。

边框属性

<table border="1">
    <tr>
        <td>第一行, 第一列td>
        <td>第一行, 第二列td>
    tr>
table>
1
2
3
4
5
6

在这里插入图片描述
没有边框的表格：

<table>
    <tr>
        <td>第一行, 第一列td>
        <td>第一行, 第二列td>
    tr>
table>
1
2
3
4
5
6

在这里插入图片描述

HTML5-3-表格

文章目录

属性

边框属性

标题

跨行和跨列

单元格边距