HTML表格(table)基础知识及简单运用

HTML表格(table)基础知识及简单运用

引用

CSDN

1.

https://blog.csdn.net/z16638522031/article/details/139046699

在网页开发中，表格（table）是一种常用的数据展示方式。本文将从基础概念出发，详细介绍HTML中table标签的常用属性以及如何制作一个简单的表格。

什么是table表格

在HTML中，我们使用<table>标签来定义表格。HTML表格与Excel表格类似，都包含行、列、单元格和表头等基本元素。不过，与Excel相比，HTML表格的功能相对有限。

table的常用属性

在创建表格时，可以使用以下属性来设置表格的样式和布局：

• margin：设置表格的外边距
• padding：设置单元格的内边距
• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度
• bgcolor：设置背景颜色
• background：设置背景图片
• border-collapse：合并边框

表格的基本结构由行（<tr>）、表头（<th>）和单元格（<td>）组成。

如何制作一个table表格

1. 确定表格的行列数

要制作一个表格，首先需要确定其行数和列数。例如，创建一个三行四列的表格，可以使用以下代码：

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

2. tr的属性

<tr>标签用于定义表格中的行，可以设置以下属性：

• border：设置边框的粗细和颜色
• align：设置水平对齐方式
• valign：设置垂直对齐方式
• bgcolor：设置背景颜色

3. th/td的属性

<th>和<td>标签分别用于定义表头单元格和普通单元格，可以设置以下属性：

• width：设置单元格的宽度
• height：设置单元格的高度
• border：设置单元格的边框
• align：设置水平对齐方式
• valign：设置垂直对齐方式
• bgcolor：设置背景颜色
• background：设置背景图片
• colspan：跨列（水平合并）
• rowspan：跨行（垂直合并）

通过合理使用这些属性，可以创建出满足不同需求的表格布局。