HTML5表格(<table>标签)是网页中常用的一种数据展示方式，它可以让我们以结构化的方式呈现数据，方便用户阅读和理解，本文将详细介绍HTML5表格的基本用法，包括创建表格、设置表格样式、添加表格行和列等。
创建表格
要使用HTML5表格，首先需要在HTML文档中插入<table>标签。<table>标签有多个属性，如border、cellpadding和cellspacing等，用于控制表格的边框、单元格内边距和单元格间距等样式，下面是一个简单的表格示例：
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
在这个示例中，我们创建了一个包含两列(姓名和年龄)的表格，表头使用<th>标签表示，表格内容使用<tr>标签表示行，单元格内容使用<td>标签表示。
设置表格样式
除了基本的结构，我们还可以为表格添加一些样式，以提高页面的美观度，以下是一些常用的表格样式属性：
1、width:设置表格宽度。
2、height:设置表格高度。
3、background-color:设置表格背景颜色。
4、color:设置表格文字颜色。
5、border:设置表格边框。
6、border-collapse:设置表格边框合并方式。
7、border-spacing:设置表格单元格间距。
8、text-align:设置表格文字对齐方式。
9、vertical-align:设置表格单元格垂直对齐方式。
10、font-family:设置表格文字字体。
11、font-size:设置表格文字大小。
12、padding:设置单元格内边距。
13、margin:设置单元格外边距。
以下是一个带有样式的表格示例：
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: f2f2f2;
}
</style>
<table>
<tr>
<th style="text-align: left;">姓名</th>
<th style="text-align: left;">年龄</th>
</tr>
<tr>
<td style="text-align: left;">张三</td>
<td style="text-align: left;">25</td>
</tr>
<tr>
<td style="text-align: left;">李四</td>
<td style="text-align: left;">30</td>
</tr>
</table>
在这个示例中，我们使用了内联CSS样式来设置表格的宽度、边框、背景颜色等样式，我们还使用了伪类选择器(如nth-child(even))来为偶数行设置背景颜色。
添加表格行和列
要向表格中添加新的行或列，可以使用<tr>和<td>标签分别表示行和单元格，以下是一个添加新行和列的示例：
<table border="1">
<tr>
<th>姓名</th>
</tr>
</table> <!-这是第一行 -->
<table border="1"> <!-这是第二行 -->
</table> <!-这是第二行的内容 -->
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/217761.html
微信扫一扫 