zoukankan      html  css  js  c++  java
  • 表格标签

    1、表格标签

      1.1基本语法:

      1.2表头单元格标签:<th>标签里面的文字加粗居中

       1.3表格属性:

      align:表格相对周围元素的对其方式,属性值:left,right,center

      设置表格宽度

      

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="UTF-8">
      5         <title></title>
      6     </head>
      7     <body>
      8         <table align="center" border="1" widt="500" height="250" cellspacing="0">
      9             <tr>
     10                 <th>排名</th>
     11                 <th>关键词</th>
     12                 <th>趋势</th>
     13                 <th>今日搜索</th>
     14                 <th>最近七天</th>
     15                 <th>相关链接</th>
     16             </tr>
     17             <tr>
     18                 <td>1</td>
     19                 <td>鬼吹灯</td>
     20                 <td>下降</td>
     21                 <td>234</td>
     22                 <td>123</td>
     23                 <td>
     24                     <a href="http://www.baidu.com" >百度</a>
     25                     <a href="http://www.qq.com">腾讯</a>
     26                     <a href="http://www.alibaba.com">阿里</a>
     27                 </td>
     28             </tr>
     29             
     30             <tr>
     31                 <td>2</td>
     32                 <td>盗墓笔记</td>
     33                 <td>下降</td>
     34                 <td>124</td>
     35                 <td>67845</td>
     36                 <td>
     37                     <a href="http://www.baidu.com" >百度</a>
     38                     <a href="http://www.qq.com">腾讯</a>
     39                     <a href="http://www.alibaba.com">阿里</a>
     40                 </td>
     41             </tr>
     42             
     43             <tr>
     44                 <td>3</td>
     45                 <td>西游记</td>
     46                 <td>上升</td>
     47                 <td>212</td>
     48                 <td>7685</td>
     49                 <td>
     50                     <a href="http://www.baidu.com" >百度</a>
     51                     <a href="http://www.qq.com">腾讯</a>
     52                     <a href="http://www.alibaba.com">阿里</a>
     53                 </td>
     54             </tr>
     55             
     56             <tr>
     57                 <td>4</td>
     58                 <td>东游记</td>
     59                 <td>上升</td>
     60                 <td>23</td>
     61                 <td>14664</td>
     62                 <td>
     63                     <a href="http://www.baidu.com" >百度</a>
     64                     <a href="http://www.qq.com">腾讯</a>
     65                     <a href="http://www.alibaba.com">阿里</a>
     66                 </td>
     67             </tr>
     68             
     69             <tr>
     70                 <td>5</td>
     71                 <td>甄嬛传</td>
     72                 <td>下降</td>
     73                 <td>56</td>
     74                 <td>7543</td>
     75                 <td>
     76                     <a href="http://www.baidu.com" >百度</a>
     77                     <a href="http://www.qq.com">腾讯</a>
     78                     <a href="http://www.alibaba.com">阿里</a>
     79                 </td>
     80             </tr>
     81             
     82             <tr>
     83                 <td>6</td>
     84                 <td>水浒传</td>
     85                 <td>上升</td>
     86                 <td>46644</td>
     87                 <td>656443</td>
     88                 <td>
     89                     <a href="http://www.baidu.com" >百度</a>
     90                     <a href="http://www.qq.com">腾讯</a>
     91                     <a href="http://www.alibaba.com">阿里</a>
     92                 </td>
     93             </tr>
     94             
     95             <tr>
     96                 <td>7</td>
     97                 <td>三国演义</td>
     98                 <td>下降</td>
     99                 <td>23</td>
    100                 <td>12300</td>
    101                 <td>
    102                     <a href="http://www.baidu.com" >百度</a>
    103                     <a href="http://www.qq.com">腾讯</a>
    104                     <a href="http://www.alibaba.com">阿里</a>
    105                 </td>
    106             </tr>
    107         </table>
    108     </body>
    109 </html>

    1.4表格结构标签

      <thead>标签 表格的头部区域,内部必须拥有<tr>标签,一般位于第一行

      <tbody>标签 表格的主体区域,主要用于放数据本体

     

     1.5合并单元格

      跨行合并:rowspan="合并单元格个数",最上侧写合并代码

      跨列合并:colspan="合并单元格个数",最左侧写合并代码

    1.6合并单元格步骤

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <table border="1" width="500" height="250" cellspacing="0">
              <tr>
                  <td></td>
                  <td colspan="2"></td>
              </tr>
               <tr>
                  <td rowspan="2"></td>
                  <td></td>
                  <td></td>
              </tr>
               <tr>
                  <td></td>
                  <td></td>
              </tr>
            </table>
        </body>
    </html>

      

     

  • 相关阅读:
    [Noip2016]天天爱跑步
    [ioi2008]Island 岛屿
    [Poi2012]Rendezvous
    RCTF2019 next_php
    WinSocket编程笔记(五)
    PTA的Python练习题(二十一)
    WinSocket编程笔记(四)
    PTA的Python练习题(二十)
    WinSocket编程笔记(三)
    WinSocket编程笔记(二)
  • 原文地址:https://www.cnblogs.com/zaqw/p/12905264.html
Copyright © 2011-2022 走看看