HTML表格的使用 与 跨行跨列

表格的基本语法:

<table>
  <tr>
    <th>第一个单元格的内容</th>
    <th>第二个单元格的内容</th>
  </tr>
  <tr>
    <td>第一个单元格的内容</td>
    <td>第二个单元格的内容</td>
  </tr>
</table>
创建表格一般分为下面四个步骤
1.创建表格标签table
2.在表格标签table创建行标签tr可以有多行
3.在第一行标签tr里创建单元格标签th可以创建表格标题
4.在行标签tr里创建单元格标签td可以有多个单元格
为了显示表格的轮廓,一般还需要设置table标签的border边框属性,指定边框的宽度

代码示例:

HTML表格的使用 与 跨行跨列

  效果图:

HTML表格的使用 与 跨行跨列

表格的跨行与跨列:

1、跨列:跨列是指单元格横向合并。col为列的意思,colspan即跨列

<table>
<tr>
<td rowspan="所挎的列数">单元格内容</td>
</tr>
</table>

代码示例:

<table border="1"  align="center" cellspacing="1" cellpadding="0" width="200px" height="200px">    <tr>        <td>姓名</td>        <td>年龄</td>        <td>性别</td>    </tr>    <tr>        <td>张三</td>        <td colspan="2">18</td>    </tr>    <tr>        <td>小红</td>        <td>18</td>        <td>女</td>    </tr></table>

第二行年龄18跨两列,所以要把同一行的后一列删除。跨列两列就是连占两个格子。所以要删掉多余的

效果图:

HTML表格的使用 与 跨行跨列

2、跨行:跨行是指单元格的纵向合并 row为行的意思,rowspan即跨行

<table>
<tr>
  <td rowspan="所挎的行数">单元格内容</td>
</tr>
</table>

代码示例:

HTML表格的使用 与 跨行跨列

效果图:

HTML表格的使用 与 跨行跨列

相关推荐