css表格

2018/02/28 23:49
阅读数 3

今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格

首先说说thead、tbody、tfoot

<thead></thead>
<tbody></tbody>
<tfoot> </tfoot> 
无论前后顺序如何改变, <thead> 内的元素总是在表的最上面, <tfoot> 总在表的最下面

可能会有人分不清 tr th td

tr: table row => 表格中的一行

th: table head => 表格头部

td: table data => 表数据

然后在看例子就很容易理解啦

表结构

<table>
   <caption>Book List</caption>
  //caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
  <thead>
    <tr>
      <th></th>   //table head 定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td><td>   //table data cell 
    	<td><td>
    	<td><td>
    	<td><td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
<table>

dome帮助理解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>table</title>
    <style type="text/css">
        table {
            background-color: #FFF;
            border: none;
            color: #565;
            font: 12px arial;
        }

        table caption {
            font-size: 24px;
            border-bottom: 2px solid #B3DE94;
            border-top: 2px solid #B3DE94;
        }

        table,
        td,
        th {
            margin: 0;
            padding: 0;
            vertical-align: middle;
            text-align: left;
        }

        tbody td,
        tbody th {
            background-color: #DFC;
            border-bottom: 2px solid #B3DE94;
            border-top: 3px solid #FFFFFF;
            padding: 9px;
        }


        tfoot td,
        tfoot th {
            font-weight: bold;
            padding: 4px 8px 6px 9px;
            text-align: center;
        }

        thead th {
            font-size: 14px;
            font-weight: bold;
            line-height: 19px;
            padding: 0 8px 2px;
            text-align: center;
        }

        tbody tr.odd th,
        tbody tr.odd td {
            /*odd就是偶数行*/
            background-color: #CEA;
            border-bottom: 2px solid #67BD2A;
        }
        tbody tr:hover td,
        tbody tr:hover th {
            /*tr也有hover样式*/
            background-color: #8b7;
            color: #fff;
        }
    </style>
</head>

<body>
    <table summary="book list">
        <caption>table</caption>
        <thead>
            <tr>
                <th>Title</th>
                <th>ID</th>
                <th>Country</th>
                <th>Price</th>
                <th>Download</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Tom</th>
                <td>1213456</td>
                <td>Germany</td>
                <td>$3.12</td>
                <td>Download</td>
            </tr>
            <tr class="odd">
                <th>Chance</th>
                <td>1213457</td>
                <td>Germany</td>
                <td>$123.34</td>
                <td>Download</td>
            </tr>
            <tr>
                <th>John</th>
                <td>1213458</td>
                <td>Germany</td>
                <td>$34.37</td>
                <td>Download</td>
            </tr>
            <tr class="odd">
                <th>oKathleen</th>
                <td>1213459</td>
                <td>Germany</td>
                <td>$23.67</td>
                <td>Download</td>
            </tr>
        </tbody>
        <tfoot>
            <tr class="odd">
                <td>tfoot</td>
                <td>tfoot</td>
                <td>tfoot</td>
                <td>tfoot</td>
                <td>tfoot</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>
</body>
</html>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部