一. <table>元素简介

<table>元素, 在HTML里也算是一个历史悠久的元素, 在div + css(web2.0时代)出来之前, 表格也通常用来进行页面的布局. 另外一个作用就是展示二维数据.

div + css出来之后, 表格渐渐变的越来越少的使用. 以至于有些人认为应该完全抛弃表格.

其实这种说法并不是太妥当.

当需要展示多行多列的数据时候还是应该使用<table>

可以<table>配合使用的还有几个标签: <thead>, <tbody>, <colgroup>,<tr>, <td>, <th>, <col>

二. <table>元素基本使用

2.1 最简单的表格

<table>
    <tr>
        <td>张三</td>
        <td>李四</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>赵六</td>
    </tr>
</table>

说明:

• <tr>: table row 表示表格的行. 一个<tr>表示表格中的一行.

• <td>: table data表示表格中的标准单元格.

2.2 带有header的表格

<table>
    <tr>
        <th>姓名</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>志玲</td>
        <td>演员</td>
    </tr>
    <tr>
        <td>春哥</td>
        <td>歌手</td>
    </tr>
</table>

说明:

• th: table header 就是我们平时所说的表头. 默认用粗体表示. 样式不是重点, 语义才是重点.

2.3 带有thead, tfoot, and tbody的表格

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>职业</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer1</td>
            <td>Footer2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>志玲</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>春哥</td>
            <td>歌手</td>
        </tr>
    </tbody>
</table>

表格太难看? 等css课程我们可以让他变的漂亮.