HTML 表格元素干货分享

HTML 表格定义
HTML表格标签用于以表格形式（行*列）显示数据，一行中可以有很多列。

我们可以用，和元素创建表格。

在每个表中，表格由

标签来定义，表行由标记定义，表头由

定义，表数据由	标记定义。

指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

提示：HTML表格可以管理页面的布局，例如标题部分，导航栏，正文内容，页脚部分等。但是建议使用div标签来管理页面的布局。

HTML 表格示例:

班级 姓名 分数
五年级1班 王维 99
五年级2班 赵高 94
五年级2班 李晨 90
五年级3班 陈霞 87
HTML 表格边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。有两种方法可以为HTML表指定边框：

通过HTML中表格的边框属性设定

通过CSS中的边框属性设定

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

<table border="1">
    <tr>
        <td>第一行, 第一列</td>
        <td>第一行, 第二列</td>
    </tr>
    <tr>
        <td>第二行, 第一列</td>
        <td>第二行, 第二列</td>
    </tr>
</table>

效果展示：

使用CSS的边框属性来显示一个带有边框的表格，且添加边线合并属性border-collapse：

<style>  
  table, th, td {  
      border: 2px solid black;  
      border-collapse: collapse;  
    }  
</style> 
<table>
    <tr>
        <td>第一行, 第一列</td>
        <td>第一行, 第二列</td>
    <tr>
        <td>第二行, 第一列</td>
        <td>第二行, 第二列</td>
    </tr>
    </tr>
</table>

图片
HTML表格内边距属性

您可以通过两种方式为表头和表数据设定内边距：

使用HTML中表格的cellpadding属性。

使用在CSS中内边距属性padding。

HTML table标记的cellpadding属性现在已过时，建议使用CSS。

<style>
    table, th, td { 

        border: 2px solid green; border-collapse: collapse; 

    } 

    th, td { 

        width:100px;padding: 15px; 

    }

</style>
<table>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>分数</th></tr>
    <tr>
        <td>五年级1班</td>
        <td>王维</td>
        <td>99</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>赵高</td>
        <td>94</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>李晨</td>
        <td>90</td></tr>
    <tr>
        <td>五年级3班</td>
        <td>陈霞</td>
        <td>87</td></tr>
</table>

效果展示：


图片
HTML单元格合并属性


如果一个单元格跨度超过一行我们可以使用rowspan合并单元格，同样如果单元格跨度超过一列，我们可以使用colspan属性合并单元格。



让我们看一下跨两行的示例：



<table>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>分数</th></tr>
    <tr>
        <td >五年级1班</td>
        <td>王维</td>
        <td>99</td></tr>
    <tr>
        <td rowspan="2">五年级2班</td>
        <td>赵高</td>
        <td>94</td></tr>
    <tr>
        <td>李晨</td>
        <td>90</td></tr>
    <tr>
        <td>五年级3班</td>
        <td>陈霞</td>
        <td>87</td></tr>
</table> 

HTML表格奇偶单元格样式

为了提升表格的可读性和视觉效果，我们可以把表格的奇偶行展示不同的样式。

<style>  
table, th, td {  
  border: 2px solid green;  
  border-collapse: collapse;  
}  
th, td {  
    width:100px;
	 height:30px;
    padding: 15px;  
}  
table#alter tr:nth-child(even) {  
  background-color:yellow;  
}  
table#alter tr:nth-child(odd) {  
  background-color:white;  
}  
table#alter th {  
  color: white;  
  background-color: gray;  
} 
</style>  
<table id="alter">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>分数</th></tr>
    <tr>
        <td>五年级1班</td>
        <td>王维</td>
        <td>99</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>赵高</td>
        <td>94</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>李晨</td>
        <td>90</td></tr>
    <tr>
        <td>五年级3班</td>
        <td>陈霞</td>
        <td>87</td></tr>
</table>

HTML 表格标签

标签 描述

本文来源:跟谁学编程 微信公众号

标签：表格,干货,边框,HTML,table,五年级,属性
来源： https://blog.csdn.net/weixin_42317619/article/details/112222734