search

博客列表 >HTML 基础之表格元素

HTML 基础之表格元素

萨龙龙
萨龙龙原创
2020年04月04日 10:13:47595浏览

表格元素

1、<table> 元素的定义和用法

  • <table> 标签定义 HTML 表格。
  • 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
  • <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
  • 更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。。

2、<table> 元素实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta
  7.       name="description"
  8.       content="PHP 系统学习之路之 HTML 基础，table 标签表格元素的使用实例"
  9.     />
  10.     <meta name="keywords" content="PHP 学习, HTML 基础, table 标签, 表格元素" />
  11.     <link rel="canonical" href="http://127.0.0.1:5500/0403/table.html" />
  12.     <link rel="shortcut icon" href="/images/favicon.jpg" />
  13.     <title>表格元素|PHP 系统学习之路之 HTML 基础</title>
  14.     <style>
  15.       /******************************************
  16.          * 主体内容
  17.          ******************************************/
  18.       main {
  19.         display: flex;
  20.         align-items: center;
  21.         justify-content: center;
  22.         align-self: center;
  23.         min-height: 600px;
  24.       }
  26.       /******************************************
  27.          * 主体内容 end
  28.          ******************************************/
  29.       /******************************************
  30.          * 表格元素
  31.          ******************************************/
  33.       table {
  34.         border-top: 1px #eee solid;
  35.         border-left: 1px #eee solid;
  36.         width: 800px;
  37.         border-spacing: 0;
  38.         font-size: 12px;
  39.         background-color: #fff;
  40.         text-align: center;
  41.         white-space: nowrap;
  42.       }
  44.       table td,
  45.       table th {
  46.         border-right: 1px #eee solid;
  47.         border-bottom: 1px #eee solid;
  48.         padding: 12px 16px;
  49.       }
  51.       /* SVG 图标 */
  52.       table svg {
  53.         width: 14px;
  54.         height: 14px;
  55.         fill: #fc0;
  56.         display: inline-block;
  57.         vertical-align: middle;
  58.         margin-left: 6px;
  59.       }
  61.       /******************* 头部 *******************/
  62.       table thead {
  63.         font-weight: bold;
  64.         background-color: #f8f8f8;
  65.         font-size: 14px;
  66.       }
  68.       table tbody tr:nth-child(2n) {
  69.         background-color: #fafafa;
  70.       }
  72.       /******************* 头部 end *******************/
  73.       /******************* 页脚 *******************/
  74.       table tfoot {
  75.         background-color: #f8f8f8;
  76.       }
  78.       /* 目标 */
  79.       .remark {
  80.         color: #f00;
  81.       }
  83.       .remark-info {
  84.         text-align: left;
  85.       }
  87.       /******************* 页脚 end *******************/
  88.       /******************************************
  89.          * 表格元素 end
  90.          ******************************************/
  91.     </style>
  92.   </head>
  94.   <body>
  95.     <!-- 主体内容 -->
  96.     <main>
  97.       <!-- 表格元素 -->
  98.       <table>
  99.         <!-- 标题 -->
  100.         <caption>
  101.           <h1>PHP 精通之路</h1>
  102.         </caption>
  103.         <!-- 头部 -->
  104.         <thead>
  105.           <tr>
  106.             <th>时间</th>
  107.             <th>星期一</th>
  108.             <th>星期二</th>
  109.             <th>星期三</th>
  110.             <th>星期四</th>
  111.             <th>星期五</th>
  112.             <th>星期六</th>
  113.             <th>星期日</th>
  114.           </tr>
  115.         </thead>
  116.         <!-- 主体 -->
  117.         <tbody>
  118.           <tr>
  119.             <td rowspan="4">上午</td>
  120.             <td>HTML5</td>
  121.             <td>CSS3</td>
  122.             <td>JavaScript</td>
  123.             <td>jQuery</td>
  124.             <td>PHP</td>
  125.             <td rowspan="4">
  126.               做作业
  127.               <svg t="1585965911798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2152" width="200" height="200"><path d="M143.66605 615.870696c0 0 114.091478 181.202968 345.819167 181.202968 231.730759 0 383.688659-181.202968 383.688659-181.202968s86.148056-0.278339 86.105077 90.585111c0 0-149.35154 211.407897-469.792713 211.407897-320.452429 0-424.74882-211.407897-424.74882-211.407897S61.575404 615.870696 143.66605 615.870696L143.66605 615.870696 143.66605 615.870696 143.66605 615.870696 143.66605 615.870696zM206.550263 106.135272c-65.643046 0-119.244848 53.067636-119.244848 118.497834 0 65.35652 53.569056 118.435413 119.244848 118.435413 65.972551 0 119.256104-53.078893 119.256104-118.435413C325.806367 159.202908 272.522814 106.135272 206.550263 106.135272L206.550263 106.135272 206.550263 106.135272 206.550263 106.135272 206.550263 106.135272 206.550263 106.135272zM817.527508 106.135272c-65.74947 0-119.1681 53.067636-119.1681 118.497834 0 65.35652 53.419653 118.435413 119.1681 118.435413 65.898873 0 119.244848-53.078893 119.244848-118.435413C936.772356 159.202908 883.426381 106.135272 817.527508 106.135272L817.527508 106.135272 817.527508 106.135272 817.527508 106.135272 817.527508 106.135272 817.527508 106.135272zM817.527508 106.135272" p-id="2153"></path></svg>
  128.             </td>
  129.             <td rowspan="4">
  130.               做作业
  131.               <svg t="1585965911798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2152" width="200" height="200"><path d="M143.66605 615.870696c0 0 114.091478 181.202968 345.819167 181.202968 231.730759 0 383.688659-181.202968 383.688659-181.202968s86.148056-0.278339 86.105077 90.585111c0 0-149.35154 211.407897-469.792713 211.407897-320.452429 0-424.74882-211.407897-424.74882-211.407897S61.575404 615.870696 143.66605 615.870696L143.66605 615.870696 143.66605 615.870696 143.66605 615.870696 143.66605 615.870696zM206.550263 106.135272c-65.643046 0-119.244848 53.067636-119.244848 118.497834 0 65.35652 53.569056 118.435413 119.244848 118.435413 65.972551 0 119.256104-53.078893 119.256104-118.435413C325.806367 159.202908 272.522814 106.135272 206.550263 106.135272L206.550263 106.135272 206.550263 106.135272 206.550263 106.135272 206.550263 106.135272 206.550263 106.135272zM817.527508 106.135272c-65.74947 0-119.1681 53.067636-119.1681 118.497834 0 65.35652 53.419653 118.435413 119.1681 118.435413 65.898873 0 119.244848-53.078893 119.244848-118.435413C936.772356 159.202908 883.426381 106.135272 817.527508 106.135272L817.527508 106.135272 817.527508 106.135272 817.527508 106.135272 817.527508 106.135272 817.527508 106.135272zM817.527508 106.135272" p-id="2153"></path></svg>
  132.             </td>
  133.           </tr>
  135.           <tr>
  136.             <td>HTML5</td>
  137.             <td>CSS3</td>
  138.             <td>JavaScript</td>
  139.             <td>jQuery</td>
  140.             <td>PHP</td>
  141.           </tr>
  143.           <tr>
  144.             <td>Mysql</td>
  145.             <td>vue.js</td>
  146.             <td>UniApp</td>
  147.             <td>Layui</td>
  148.             <td>Laravel</td>
  149.           </tr>
  151.           <tr>
  152.             <td>Mysql</td>
  153.             <td>vue.js</td>
  154.             <td>UniApp</td>
  155.             <td>Layui</td>
  156.             <td>Laravel</td>
  157.           </tr>
  158.         </tbody>
  159.         <!-- 主体2 -->
  160.         <tbody>
  161.           <tr>
  162.             <td rowspan="2">下午</td>
  163.             <td>小视频开发</td>
  164.             <td>在线商城系统开发</td>
  165.             <td>IM 即时通讯</td>
  166.             <td>Linux系统运维</td>
  167.             <td>PHP爬虫采集课程</td>
  168.             <td rowspan="2">休息</td>
  169.             <td rowspan="2">休息</td>
  170.           </tr>
  172.           <tr>
  173.             <td>多人直播聊天室系统</td>
  174.             <td>商品高并发秒杀系统</td>
  175.             <td>新闻/文章管理系统</td>
  176.             <td>通用后台管理系统</td>
  177.             <td>哎呀，要毕业了</td>
  178.           </tr>
  179.         </tbody>
  180.         <!-- 页脚 -->
  181.         <tfoot>
  182.           <td class="remark">目标</td>
  183.           <td colspan="7" class="remark-info">
  184.             通过这次 PHP 入门到精通系统课程的学习能让自己在 PHP 开发上畅通无阻。
  185.             <svg t="1585965939640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3590" width="200" height="200"><path d="M373.264 748.378a35.775 35.775 0 0 1-11.225 10.439 35.775 35.775 0 0 1-14.55 4.821c-4.202 0.45-8.512 0.163-12.73-0.922a35.807 35.807 0 0 1-11.606-5.313 35.775 35.775 0 0 1-10.439-11.225 35.775 35.775 0 0 1-4.822-14.55 35.942 35.942 0 0 1-0.17-5.36l0.04-1.889a159576.713 159576.713 0 0 0 0.75-34.708 207776.96 207776.96 0 0 0 1.892-88.8c1.197-56.822 2.027-97.757 2.334-115.851a36 36 0 0 1 0.062-1.588c0.214-3.486 0.259-7.166 0.251-16.765-0.014-17.26 0.172-26.21 1.097-37.998 1.312-16.727 3.95-32.303 8.435-47.398 14.367-48.349 46.335-86.345 99.461-110.108 33.684-15.062 48.446-36.358 49.277-60.814 0.347-10.184-1.888-20.53-6.108-29.348-3.485-7.282-7.839-12.451-10.986-14.338-18.286-10.937-46.267-19.437-71.504-19.658-30.242-0.266-54.147 10.502-71.482 35.203-12.42 17.696-19.677 35.19-24.064 56.019-2.656 12.605-3.986 23.596-6.167 47.83-2.546 28.299-3.949 40.5-7.18 57.507-4.449 23.405-11.161 45.242-21.221 67.213-17.871 38.986-40.302 121.628-59.359 216.353C174.974 717.974 163 804.328 163 846.21c0 8.285 1.72 11.863 6.297 15.234 7.413 5.46 21.709 9.947 43.473 12.62 22.437 2.756 51.45 3.493 91.041 2.537 16.959-0.409 35.77-1.115 59.706-2.2 9.437-0.428 19.24-0.894 33-1.562l17.25-0.84c7.017-0.341 12.416-0.602 17.735-0.857 41.42-1.984 72.364-3.277 104.592-4.262 115.805-3.542 208.337-25.115 266.345-59.112 25.031-14.67 42.145-30.869 51.119-47.165 7.793-14.152 9.437-28.292 5.067-43.367-11.438-39.433-44.774-79.634-92.067-109.582-50.655-32.077-112.198-49.403-173.927-47.197-50.612 1.799-102.067 34.55-150.563 89.477-18.333 20.763-34.858 43.157-49.217 65.545-5.014 7.819-9.384 15.051-13.072 21.495a318.83 318.83 0 0 0-3.244 5.796c-0.276 0.508-0.493 0.91-0.649 1.201a35.947 35.947 0 0 1-2.622 4.407z m14.83-146.098c26.62-30.149 55.087-55.652 85.464-74.987 37.206-23.682 76.154-37.356 116.509-38.79 76.486-2.734 152.299 18.61 215.011 58.322 61.247 38.784 105.983 92.733 122.698 150.36 9.726 33.552 5.794 67.382-11.149 98.15-15.785 28.665-42.282 53.746-77.783 74.551-69.686 40.84-173.648 65.08-300.549 68.96-31.739 0.97-62.307 2.248-103.348 4.213-5.298 0.254-10.68 0.515-17.68 0.855-0.05 0.003-13.477 0.657-17.258 0.84-13.83 0.672-23.701 1.14-33.23 1.573-24.4 1.106-43.683 1.83-61.23 2.253-42.805 1.034-74.93 0.218-101.556-3.053-32.936-4.045-58.205-11.978-77.393-26.11C103.157 902.153 91 876.873 91 846.21c0-47.84 12.516-138.098 31.664-233.28 20.09-99.863 43.665-186.717 64.487-232.142 7.525-16.433 12.538-32.741 15.944-50.667 2.648-13.93 3.869-24.552 6.205-50.516 2.43-26.995 4-39.966 7.423-56.219 6.318-29.997 17.321-56.517 35.583-82.538 31.818-45.337 78.363-66.303 131.049-65.84 38.598 0.338 78.968 12.602 107.86 29.882 32.42 19.434 53.57 63.625 52.065 107.906-1.78 52.349-33.397 97.96-91.841 124.093-33.453 14.964-51.31 36.187-59.838 64.89-5.325 17.921-6.575 33.849-6.55 64.83 0.009 10.678-0.04 15.205-0.336 20.392-0.32 18.595-1.144 59.226-2.327 115.387l-0.116 5.52-0.024 1.102c1.929-2.256 3.878-4.5 5.847-6.73z" fill="#000000" p-id="3591"></path></svg>
  186.           </td>
  187.         </tfoot>
  188.       </table>
  189.       <!-- 表格元素 end -->
  190.     </main>
  191.     <!-- 主体内容 end -->
  192.   </body>
  193. </html>

3、实例预览

上一条：网页的基本知识和html文档基本内容 2020.4.2 作业下一条：HTML基础知识总结0402
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多