专用于table的html标签和css属性

<caption> 标签定义表格的标题。

<caption> 标签必须直接放置到 <table> 标签之后。

您只能对每个表格定义一个标题。

提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

caption-side:bottom;属性规定表格标题的位置。可以有top、bottom、inherit。不支持left/right。

如果标题要放在左侧的话，不考虑IE的话，可以给table设置display: flex。这样标题就可以和表格并排显示，达到标题在左侧的目的。

还有一个办法，就是用合并单元格来模拟标题：

<tr>
            <td class="expert_caption" rowspan="4">表格标题</td>
            <td style="background-color: #ecf5fc">高级职称:8名</td>
            <td>副高级职称：4名</td>
</tr>

rowspan：向下合并单元格。  colspan：横向合并单元格。

完整代码示例：

    <style>
        .expert_title{
            width: 26em;
            margin: 0 auto;
        }
        .expert_title table{
            border-collapse: collapse;
            box-sizing: border-box;
        }
       .expert_title .expert_caption{
            width: 1em;
            line-height: 1em;
            text-align: center;
            font-weight: bold;
            font-size: 1.25em;
            padding: 0 0.8em;
            border: none;
        }
        .expert_title td{
            border: 1px solid #cecece;
            width: 11.45em;
            height: 1.8em;
            line-height: 1.8em;
            color: #666666;
            padding-left: 2em;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="expert_title">
    <table>
        <tr>
            <td class="expert_caption" rowspan="4">我是标题</td>
            <td style="background-color: #ecf5fc">高级职称:8名</td>
            <td>副高级职称：4名</td>
        </tr>
        <tr>
            <td>教授：4名</td>
            <td style="background-color: #ecf5fc">副教授：2名</td>
        </tr>
        <tr>
            <td style="background-color: #ecf5fc">博士：2名</td>
            <td>博导：1名</td>
        </tr>
        <tr>
            <td>硕导：1名</td>
            <td style="background-color: #ecf5fc"><a href="/zjtd/">了解更多>></a></td>
        </tr>
    </table>
</div>
</body>

效果如下：

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开，应用在table标签上。

<style>
caption {caption-side:bottom;}
table { border-collapse: collapse;}
</style>
</head>

<body>

<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table>

<p><b>注意:</b>如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .</p>
</body>






            

            
posted @ 
2017-07-04 14:30 
kiera 
阅读(1579) 
评论(0) 
编辑 
收藏 
举报