表格

表格

在HTML中，<table>元素用于创建表格，用于显示数据或组织内容。表格由行（<tr>）、单元格（<td>或<th>）组成。

基本结构

• <table>：表格容器定义表格的开始和结束。
• <tr>：定义表格的行（Table Row）。
• <th>：定义表格的标题单元格（Table Header），通常用于表头。
• <td>：定义表格的普通单元格（Table Data）。
• <thead>：定义表格的头部区域。
• <tbody>：定义表格的主体区域。
• <tfoot>：定义表格的脚注区域。

常用属性

<table>属性

• border：设置表格边框的宽度（单位为像素）。例如：border="1"。
• width：设置表格的宽度，可以是像素值（如width="500"）或百分比（如width="100%"）。
• height：设置表格的高度。
• bgcolor:设置单元格背景色。
• bordercolor：设置边框色。
• cellpadding：设置单元格内容与边框之间的间距。
• cellspacing：设置单元格之间的间距。
• align：设置表格的水平对齐方式（left、center、right）。
• valign：设置表格内容的垂直对齐方式（top、middle、bottom）。
• contenteditable：设置表格可编辑。

<td>和<th>属性

• colspan：横向合并单元格，设置单元格跨越的列数。例如：colspan="2"。
• rowspan：纵向合并单元格，设置单元格跨越的行数。例如：rowspan="2"。
• align：设置单元格内容的水平对齐方式。
• valign：设置单元格内容的垂直对齐方式。

<table border="1" width="500" cellspacing="0" cellpadding="10">
    <tr>
        <th colspan="2">Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td rowspan="2">Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
</table>

CSS样式

虽然HTML表格支持一些属性，但推荐使用CSS来控制表格的样式，以实现更好的灵活性和可维护性。

table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 设置表格宽度 */
    border: 1px solid #ccc; /* 设置表格边框 */
}
​
th, td {
    border: 1px solid #ccc; /* 设置单元格边框 */
    padding: 10px; /* 设置单元格内边距 */
    text-align: left; /* 设置单元格内容对齐方式 */
}
​
th {
    background-color: #f2f2f2; /* 设置表头背景颜色 */
}

带斑马纹的表格

<table>
  <tr> <th>Header 1</th><th>Header 2</th><th>Header 3</th> </tr>
  <tr> <td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td> </tr>
  <tr> <td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td> </tr>
  <tr> <td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td> </tr>
</table>

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ccc;
  }
​
  th, td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
  }
​
  th {
    background-color: red;
  }
​
  tr:nth-child(even) {
    background-color: #c6c3c3;
  }
​
  tr:nth-child(odd) {
    background-color: #fff;
  }

<thead>、<tbody>和<tfoot>

这些标签用于逻辑上划分表格的头部、主体和脚注部分，有助于提高表格的可访问性和语义化。

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Footer Row</td>
        </tr>
    </tfoot>
</table>

响应式表格

在移动设备上，表格可能会显得过于拥挤。可以通过CSS实现响应式表格，例如：

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
​
    th, td {
        text-align: right;
    }
​
    td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

在HTML中，需要为<td>添加data-label属性：

<td data-label="Header 1">Row 1, Cell 1</td>

案例

<table border="3" cellspacing="0" width="500px" height="200px" bgcolor="aqua" bordercolor="red">
    <caption>小表格</caption>
    <tr align="center"><td>1</td><td>2</td></tr>
    <tr align="center"><td>3</td><td>4</td></tr>
    <tr align="center"><td>5</td><td>6</td></tr>
</table>
​
<table border="2" cellspacing="0" width="400px" height="200px" bordercolor="yellow">
    <caption>学习成绩表</caption>
    <col span="2" style="background-color: blueviolet;" />
    <tr align="center"><td colspan="2">1</td></tr>
    <tr align="center"><td>3</td><td rowspan="2">4</td></tr>
    <tr align="center"><td>5</td></tr>
</table>
​
<table border="1" cellspacing="0 " width="500px" height="200px">
    <caption>学习成绩表</caption>
    <tr align="center"><td colspan="2">录入时间2019年9月9号</td></tr>
    <tr align="center"><td>名字</td><td>成绩</td></tr>
    <tr align="center"><td>小红</td><td>100</td></tr>
    <tr align="center"><td>小明</td><td>98</td></tr>
    <tr align="center"><td colspan="2">总人数：2人</td></tr>
</table>

其他写法

<style>
    table,
    tr,
    td {
        border: 1px solid #333;
    }
​
    table {
        border-collapse: collapse;
        background-color: aqua;
        width: 500px;
        height: 200px;
    }
</style>
​
<body>
    <table>
        <caption>小表格</caption>
        <tr align="center">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
        <tr align="center">
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>

表格

在HTML中，<table>元素用于创建表格，用于显示数据或组织内容。表格由行（<tr>）、单元格（<td>或<th>）组成。

基本结构

• <table>：表格容器定义表格的开始和结束。
• <tr>：定义表格的行（Table Row）。
• <th>：定义表格的标题单元格（Table Header），通常用于表头。
• <td>：定义表格的普通单元格（Table Data）。
• <thead>：定义表格的头部区域。
• <tbody>：定义表格的主体区域。
• <tfoot>：定义表格的脚注区域。

常用属性

<table>属性

• border：设置表格边框的宽度（单位为像素）。例如：border="1"。
• width：设置表格的宽度，可以是像素值（如width="500"）或百分比（如width="100%"）。
• height：设置表格的高度。
• bgcolor:设置单元格背景色。
• bordercolor：设置边框色。
• cellpadding：设置单元格内容与边框之间的间距。
• cellspacing：设置单元格之间的间距。
• align：设置表格的水平对齐方式（left、center、right）。
• valign：设置表格内容的垂直对齐方式（top、middle、bottom）。
• contenteditable：设置表格可编辑。

<td>和<th>属性

• colspan：横向合并单元格，设置单元格跨越的列数。例如：colspan="2"。
• rowspan：纵向合并单元格，设置单元格跨越的行数。例如：rowspan="2"。
• align：设置单元格内容的水平对齐方式。
• valign：设置单元格内容的垂直对齐方式。

<table border="1" width="500" cellspacing="0" cellpadding="10">
    <tr>
        <th colspan="2">Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td rowspan="2">Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
</table>

CSS样式

虽然HTML表格支持一些属性，但推荐使用CSS来控制表格的样式，以实现更好的灵活性和可维护性。

table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 设置表格宽度 */
    border: 1px solid #ccc; /* 设置表格边框 */
}
​
th, td {
    border: 1px solid #ccc; /* 设置单元格边框 */
    padding: 10px; /* 设置单元格内边距 */
    text-align: left; /* 设置单元格内容对齐方式 */
}
​
th {
    background-color: #f2f2f2; /* 设置表头背景颜色 */
}

带斑马纹的表格

<table>
  <tr> <th>Header 1</th><th>Header 2</th><th>Header 3</th> </tr>
  <tr> <td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td> </tr>
  <tr> <td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td> </tr>
  <tr> <td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td> </tr>
</table>

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ccc;
  }
​
  th, td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
  }
​
  th {
    background-color: red;
  }
​
  tr:nth-child(even) {
    background-color: #c6c3c3;
  }
​
  tr:nth-child(odd) {
    background-color: #fff;
  }

<thead>、<tbody>和<tfoot>

这些标签用于逻辑上划分表格的头部、主体和脚注部分，有助于提高表格的可访问性和语义化。

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Footer Row</td>
        </tr>
    </tfoot>
</table>

响应式表格

在移动设备上，表格可能会显得过于拥挤。可以通过CSS实现响应式表格，例如：

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
​
    th, td {
        text-align: right;
    }
​
    td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

在HTML中，需要为<td>添加data-label属性：

<td data-label="Header 1">Row 1, Cell 1</td>

案例

<table border="3" cellspacing="0" width="500px" height="200px" bgcolor="aqua" bordercolor="red">
    <caption>小表格</caption>
    <tr align="center"><td>1</td><td>2</td></tr>
    <tr align="center"><td>3</td><td>4</td></tr>
    <tr align="center"><td>5</td><td>6</td></tr>
</table>
​
<table border="2" cellspacing="0" width="400px" height="200px" bordercolor="yellow">
    <caption>学习成绩表</caption>
    <col span="2" style="background-color: blueviolet;" />
    <tr align="center"><td colspan="2">1</td></tr>
    <tr align="center"><td>3</td><td rowspan="2">4</td></tr>
    <tr align="center"><td>5</td></tr>
</table>
​
<table border="1" cellspacing="0 " width="500px" height="200px">
    <caption>学习成绩表</caption>
    <tr align="center"><td colspan="2">录入时间2019年9月9号</td></tr>
    <tr align="center"><td>名字</td><td>成绩</td></tr>
    <tr align="center"><td>小红</td><td>100</td></tr>
    <tr align="center"><td>小明</td><td>98</td></tr>
    <tr align="center"><td colspan="2">总人数：2人</td></tr>
</table>

其他写法

<style>
    table,
    tr,
    td {
        border: 1px solid #333;
    }
​
    table {
        border-collapse: collapse;
        background-color: aqua;
        width: 500px;
        height: 200px;
    }
</style>
​
<body>
    <table>
        <caption>小表格</caption>
        <tr align="center">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
        <tr align="center">
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>