专⽤于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 >⾼级职称: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 >⾼级职称:8名</td>
<td>副⾼级职称：4名</td>
</tr>
<tr>
<td>教授：4名</td>
<td >副教授：2名</td>
</tr>
<tr>
<td >博⼠：2名</td>
<td>博导：1名</td>
</tr>
<tr>
<td>硕导：1名</td>
<td ><a href="/zjtd/">了解更多>></a></td>
</tr>
</table>
</div>
</body>
效果如下：
border-collapse 属性设置表格的边框是否被折叠成⼀个单⼀的边框或隔开，应⽤在table标签上。<style>
caption {caption-side:bottom;}
html代码属性大全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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。