博主信息
博文 5
粉丝 0
评论 0
访问量 3627
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html表格
帝踏锋
原创
907人浏览过

表格元素

1. 简介

  • 表格是最重要的数据格式化展示重要工具, 使用频率非常高
  • 表格的数据,存储在由行与列组成的一系列单元格
  • 数据必须存储在单元格元素中
  • 与列表类似, 表格也是由一系列标签来描述

2.常用标签

序号 标签 描述 备注
1 <table> 定义表格, 必选
2 <tbody> 定义表格主体, 允许定义多次 必选
3 <tr> 定义表格中的行, 必选
4 <th> 定义表格头部中的单元格,默认加粗居中 必选
5 <td> 定义表格主体与底部的的单元格 必选
6 <caption> 定义表格标题, 可选
7 <thead> 定义表格头格, 只需定义一次 可选
8 <tfoot> 定义表格底, 只需定义一次 可选
9 <col> 为一个/多个列设置属性,仅限 可选
10 <colgroup> 将多个<col>元素分组管理 可选

3.表格中的行与列的合并

跨行:

  1. rowspan=""

跨列:

  1. colspan=""

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>订单表</title>
  7. </head>
  8. <body>
  9. <table border="1" width="600" height="200" cellspacing="0" cellpadding="5" align="center">
  10. <caption style="font-size: 1.5rem; margin-bottom: 10px">
  11. 用户订单表
  12. </caption>
  13. <thead>
  14. <th colspan="2">用户信息</th>
  15. <th colspan="3">订单信息</th>
  16. <th colspan="4">地址信息</th>
  17. </thead>
  18. <tbody>
  19. <tr>
  20. <td>姓名</td>
  21. <td>手机号</td>
  22. <td>订单号</td>
  23. <td>日期</td>
  24. <td>金额</td>
  25. <td></td>
  26. <td></td>
  27. <td></td>
  28. <td>详细地址</td>
  29. </tr>
  30. <tr>
  31. <td rowspan="4">张三</td>
  32. <td>12345678910</td>
  33. <td>202010101234</td>
  34. <td>2020-10-10</td>
  35. <td>635.00</td>
  36. <td>广东省</td>
  37. <td>深圳市</td>
  38. <td>龙岗区</td>
  39. <td>西瓜大道123号</td>
  40. </tr>
  41. <tr>
  42. <td>12322318910</td>
  43. <td>202010105987</td>
  44. <td>2020-10-10</td>
  45. <td>5135.00</td>
  46. <td>广东省</td>
  47. <td>韶关市</td>
  48. <td>乐昌市</td>
  49. <td>西瓜大道123号</td>
  50. </tr>
  51. <tr>
  52. <td>12346952910</td>
  53. <td>202010102256</td>
  54. <td>2020-10-10</td>
  55. <td>6352.00</td>
  56. <td>广东省</td>
  57. <td>广州市</td>
  58. <td>海珠区</td>
  59. <td>西瓜大道123号</td>
  60. </tr>
  61. <tr>
  62. <td>12315423910</td>
  63. <td>202010101542</td>
  64. <td>2020-10-10</td>
  65. <td>946.00</td>
  66. <td>广东省</td>
  67. <td>佛山市</td>
  68. <td>龙岗区</td>
  69. <td>西瓜大道123号</td>
  70. </tr>
  71. </tbody>
  72. </table>
  73. </body>
  74. </html>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:表格的功能比较多, 除了数据格式化, 还能布局呢
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
  • 2020-10-13 14:19:17
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学