HTML表格基础：创建跨行跨列的表格教程

"本资源主要介绍了如何在HTML中创建跨行跨列的表格，通过示例代码展示了表格的基础结构和相关标签的使用方法，适用于学习ACCp5.0的HTML表格知识。" 在HTML中，表格是一种强大的工具，用于组织和展示数据。表格由行（<TR>）、列（<TD>或<TH>）和单元格（<TD>）组成。创建一个基本的表格需要以下标签： 1. `<TABLE>`：定义表格的开始和结束，如`<TABLE>`和`</TABLE>`。 2. `<TR>`：定义表格的一行，用于包含单元格。 3. `<TD>`：定义表格数据单元格，用于放置内容。 例如，创建一个简单的两行两列的表格可以这样写： ```html <TABLE border="1"> <TR> <TD>列1, 行1</TD> <TD>列2, 行1</TD> </TR> <TR> <TD>列1, 行2</TD> <TD>列2, 行2</TD> </TR> </TABLE> ``` 在上述示例中，`border="1"`用于设置表格边框的宽度。 为了实现跨行和跨列的效果，我们可以使用`rowspan`和`colspan`属性。`rowspan`定义了单元格跨越的行数，而`colspan`定义了跨越的列数。 例如，如果要创建一个单元格跨两行的表格： ```html <TABLE border="1"> <TR> <TD>内容1</TD> <TD rowspan="2">内容2，跨两行</TD> </TR> <TR> <TD>内容3</TD> </TR> </TABLE> ``` 对于跨列，可以使用`colspan`属性，如下所示： ```html <TABLE border="1"> <TR> <TD>内容1</TD> <TD>内容2</TD> <TD colspan="2">内容3，跨两列</TD> </TR> <TR> <TD>内容4</TD> <TD>内容5</TD> <TD>内容6</TD> </TR> </TABLE> ``` 在跨行跨列的表格中，`colspan="3"`表示该单元格将跨越3列，`rowspan="3"`则表示跨越3行。例如： ```html <TABLE border="1"> <TR> <TD>手机充值、IP卡</TD> <TD colspan="2">办公设备、文具</TD> </TR> <TR> <TD rowspan="2">各种卡的总汇</TD> <TD>铅笔</TD> <TD>彩笔</TD> </TR> <TR> <TD>打印</TD> <TD>刻录</TD> </TR> </TABLE> ``` 这个表格中，“各种卡的总汇”单元格使用`rowspan="2"`跨两行，而“办公设备、文具”使用`colspan="2"`跨两列。 通过学习HTML表格，我们可以创建复杂的数据布局，如论坛、门户网站和购物网站中的各种数据展示。掌握表格的使用，包括跨行跨列，是网页设计和开发的基本技能之一。