css tbody标签

笙歌醉梦间 6个月前 184浏览 0评论

CSS中的tbody标签是用于格式化HTML表格的重要的元素之一。通常,HTML表格由thead、tfoot和tbody三个部分组成。

tbody标签用于定义表格中的主体部分。该标签可以在table标签内部,表示表格中的行数据。

  
      <table>
         <thead>
             <tr>
                 <th>标题1</th>
                 <th>标题2</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>数据1</td>
                 <td>数据2</td>
             </tr>
             <tr>
                 <td>数据3</td>
                 <td>数据4</td>
             </tr>
         </tbody>
         <tfoot>
             <tr>
                 <td colspan="2">页底信息</td>
             </tr>
         </tfoot>
     </table>
  

通过使用CSS,我们可以为表格中的行添加样式,以更好的呈现表格中的数据。

例如,我们可以使用CSS的background-color属性为表格添加背景颜色,使用color属性为文本添加颜色,使用font-size属性为文本设置字体大小等等。此外,我们还可以使用CSS的hover伪类来为鼠标悬停时表格行添加样式。

  
     tbody tr:hover {
         background-color: #f5f5f5;
     }

     tbody tr:nth-child(even) {
         background-color: #f2f2f2;
     }

     tbody td {
         border: 1px solid #ddd;
         padding: 8px;
         text-align: center;
         font-size: 16px;
         color: #333;
     }
  

通过使用CSS,我们可以让表格更具有可读性和可用性,从而更有利于用户查看和理解表格中的数据。