ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML表格的使用 与 跨行跨列

2019-11-10 17:54:05  阅读:309  来源: 互联网

标签:表格 示例 标签 单元格 跨列 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边框属性,指定边框的宽度

代码示例:

 

  效果图:

 

 

表格的跨行与跨列:

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跨两列,所以要把同一行的后一列删除。跨列两列就是连占两个格子。所以要删掉多余的

效果图:

 

 

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

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

代码示例:

 

 

效果图:

 

 

 

标签:表格,示例,标签,单元格,跨列,HTML,跨行
来源: https://www.cnblogs.com/aryl/p/11831065.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有