分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

html-表格标签

发布时间:2023-09-06 02:20责任编辑:白小东关键词:暂无标签

  表格标签可以对数据进行格式化,使数据显示更加清晰

    <table></table>:表示表格的范围
      - border:表格线
      - bordercolor:表格线的颜色
      - cellspacing:单元格之间的距离
      - width:表格的宽度
      - height:表格的高度

    ** 在table里面:<tr></tr>
      - 设置显示方式 aligh:left、center、right
      ** 在tr里面:<td></td>
        - 设置显示方式 aligh:left、center、right
      ** 使用th也可以实现居中和加粗

    * 代码
    <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">

    ** 表格的标题
      <caption></caption>

    *分析表格的写法
      - 首先定义一个表格的范围使用table
      - 定义一行使用tr
      - 定义一个单元格使用 td

    ** 操作技巧
      - 首先数有多少行(tr),数每行里面有多少个单元格(td)

    ** 合并单元格
      - rowspan:跨行
      - colspan:跨列

  完整代码:

<html> ???<head> ???????<title>World</title> ???</head> ???<body> ???????<!-- 实现3行四列的表格 --> ???????<table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100"> ???????????<caption>公司职员信息表</caption> ???????????<tr align="center"> ???????????????<td>姓名</td> ???????????????<td>性别</td> ???????????????<td>年龄</td> ???????????????<td>职位</td> ???????????</tr> ???????????<tr align="center"> ???????????????<td>栗子壳</td> ???????????????<td>男</td> ???????????????<td>20</td> ???????????????<td>老总</td> ???????????</tr> ???????????<tr> ???????????????<th>栗子米</th> ???????????????<th>女</th> ???????????????<th>19</th> ???????????????<th>秘书</th> ???????????</tr> ???????????????</table> ???</body></html>
<html> ???<head> ???????<title>World</title> ???</head> ???<body> ???????<!-- ???????测试跨列 ???????第一行:1 ???????第二行到第四行:3 ???????--> ???????<table border="1" cellspacing="0" bordercolor="blue" width="200"> ???????????<tr> ???????????????<td colspan="3" align="center">人员信息</td> ???????????</tr> ???????????<tr> ???????????????<td>岳不群</td> ???????????????<td>女</td> ???????????????<td>40</td> ???????????</tr> ???????????<tr> ???????????????<td>令狐冲</td> ???????????????<td>男</td> ???????????????<td>25</td> ???????????</tr> ???????????<tr> ???????????????<td>东方不败</td> ???????????????<td>女</td> ???????????????<td>24</td> ???????????</tr> ???????</table> ???????<hr/> ???????<!-- ???????测试跨行 ???????第一行:3 ???????第二行到第三行:2 ???????--> ???????<table border="1" cellspacing="0" bordercolor="blue" width="200"> ???????????<tr> ???????????????<td>岳不群</td> ???????????????<td>女</td> ???????????????<td rowspan="3" align="center">40</td> ???????????</tr> ???????????<tr> ???????????????<td>令狐冲</td> ???????????????<td>男</td> ???????????</tr> ???????????<tr> ???????????????<td>东方不败</td> ???????????????<td>女</td> ???????????</tr> ???????</table> ???</body></html>

html-表格标签

原文地址:https://www.cnblogs.com/ibabyli/p/9882388.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved