4、使用HTML和CSS创建高效的表格布局

使用HTML和CSS创建高效的表格布局

1. 表格的基本概念与结构

表格是网页开发中不可或缺的一部分，它们不仅用于展示数据，如时间表、财务报告和体育赛事结果，还可以用于控制页面布局。在HTML和XHTML中，表格的创建基于网格模式，使用四种基本元素： <table> 、 <tr> 、 <td> 和 <th> 。这些元素各自承担着不同的角色，共同构建出完整的表格结构。

• <table> ：定义表格本身。
• <tr> ：定义表格中的一行。
• <td> ：定义表格中的一个单元格，用于存放数据。
• <th> ：定义表格中的一个单元格，用于存放标题，默认情况下内容会被加粗显示。

1.1 创建简单表格

创建一个简单的表格非常直观。下面是一个基本的表格示例：

<table border="1">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>