首页 | 简单教程,简单编程

代码编辑器：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/lib/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
    <h2>黑色条纹表格</h2>
    <p>同时使用 .table-dark 和 .table-hover CSS 类可以设置黑色背景表格的鼠标悬停效果</p>
    <table class="table">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>      
      <tr class="table-primary">
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr class="table-success">
        <td>王</td>
        <td>安石</td>
        <td>北宋</td>
      </tr>
      <tr class="table-danger">
        <td>欧阳</td>
        <td>修</td>
        <td>北宋</td>
      </tr>
      <tr class="table-info">
        <td>司马</td>
        <td>迁</td>
        <td>西汉</td>
      </tr>
      <tr class="table-warning">
        <td>杨</td>
        <td>修</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-active">
        <td>曹</td>
        <td>操</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-secondary">
        <td>曹</td>
        <td>植</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-light">
        <td>施</td>
        <td>耐庵</td>
        <td>元</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>苏</td>
        <td>轼</td>
        <td>北宋</td>
      </tr>
    </tbody>
</table>
    </div>

运行结果：