前端HTML表格标签

11 篇文章 0 订阅

  <h2>表格标签是用来展示数据的</h2>

 
  <table border ="1" cellspacing="0" width="350" height="220" align ="center"> <!--cellspacing="0"规定单元格之间的空白,默认为2像素。-->
<!-- th 表头文字居中加粗显示-->
    <tr><th>姓名</th>   <th >性别</th>  <th>年龄</th>   </tr> 
    <tr><td>陈哈哈</td>   <td>女</td>  <td>18</td>   </tr>
    <tr><td>陈可爱</td>   <td>女</td>  <td>19</td>   </tr>
    <tr><td>美少女</td>   <td>女</td>  <td>20</td>   </tr>
  </table></br>

  <table border ="1" cellspacing="0"  align ="center" width="600" height="300"><br>
     <!-- thead表格头部标签 thead包含tr标签,tbody表格主体区域标签 -->
       <!-- table一个大的盒子,tr行的标签,td单元格标签 -->
       <!-- th表头单元格标签,加粗 -->
<thead>
    <tr>
      <th>排名</th>
      <th>关键词</th>
      <th>趋势</th>
      <th>今日搜索</th>
      <th>最近七日</th>
      <th>相关链接</th>
    </tr>
  </thead>
<tbody>
      <tr>
      <td>1</td>
      <td>鬼吹灯</td>
      <td><img src="img/down.jpg"></td>
      <td>456</td>
      <td>123</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> <!--这里的#是一个空的链接-->
    </tr>


    <tr>
      <td>2</td>
      <td>盗墓笔记</td>
      <td><img src="img/down.jpg"></td>
      <td>124</td>
      <td>675432</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>


    <tr>
      <td>3</td>
      <td>西游记</td>
      <td><img src="img/up.jpg"></td>
      <td>212</td>
      <td>7654</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>


    <tr>
      <td>4</td>
      <td>东游记</td>
      <td><img src="img/up.jpg"></td>
      <td>23</td>
      <td>75645</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>


    <tr>
      <td>5</td>
      <td>甄嬛传</td>
      <td><img src="img/down.jpg"></td>
      <td>124</td>
      <td>675432</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>


    <tr>
      <td>6</td>
      <td>水浒传</td>
      <td><img src="img/up.jpg"></td>
      <td>576576</td>
      <td>1231421</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>


    <tr>
      <td>7</td>
      <td>三国演义</td>
      <td><img src="img/up.jpg"></td>
      <td>234</td>
      <td>7686</td>
      <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>


    </tr>

  </tbody>
</table>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值