• 目录

表格Table

阅读量: 40 编辑

表格Table

一、表格 Table 介绍

  • 表格常用来做数据展示，类似于 Excel

  • class="table"

    • 边框：table-bordered

    • 悬停：table-hover

  • 单元格样式：.active、.success、.warning、.danger、.info

二、代码实战

代码的详细解读，可以参考视频教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>

</head>
<body>
    <h1>表格Table</h1>

    <table class="table table-hover table-bordered ">
        <caption>表格案例</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>用户名</th>
                <th>住址</th>
            </tr>
        </thead>

        <tbody>
            <tr class="warning">
                <td>张三</td>
                <td>zhangsan</td>
                <td>北京</td>
            </tr>
            <tr class="success">
                <td>李四</td>
                <td>lisi</td>
                <td>上海</td>
            </tr>
            <tr>
                <td class="danger">王五</td>
                <td>wangwu</td>
                <td>广东</td>
            </tr>
        </tbody>
    </table>

</body>
</html>
  • 目录