html学习之表格标签

表格标签

主要作用

表格主要用于显示,展示数据,他可以让数据展示的非常的规整,可读性非常好.特别是后台展示数据的时候,能够熟练运用表格就显得很重要.一个清爽简约的表格,能够把复杂的数据表现的很有条理.

基本语法

    <table>
        <tr>
            <th>支出项目</th>
            <th>单价(元)</th>
            <th>数目</th>
            <th>金额(元)</th>
        </tr>
        <tr>
            <td>垃圾箱</td>
            <td>30</td>
            <td>12</td>
            <td>360</td>
        </tr>
        ...
    </table>

1. table标签用来定义一个表格
2. tr标签用来定义表格中的行,必须嵌套在table标签中
3. td用于定义表格中的单元格,必须嵌套在tr标签中
4. 字母td值表格数据(table data),即数据单元格的内容
5. 字母th表示(table head),即表头,会有加粗效果

表格属性

表格的属性,我们在实际的开发中不常用,后面通过css来设置

目的只有两个:

1. 记住这些英语单词,后面css会用到
2. 直观感受表格的外观形态

属性名	属性值	描述
align	left center right	相对周围的对齐方式
border	1 或者""	边框,默认没有边框
cellpadding	像素值	单元边沿与其内容之间的空白,默认是一个像素
cellspacing	像素值	单元格之间的空白,默认是两个像素
width	像素值或者百分比	表格的宽度

    <table align="center" border="1" cellpadding="" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>刘德华</td><td>男</td><td>57</td></tr>
        <tr><td>张学友</td><td>男</td><td>57</td></tr>
        <tr><td>郭富城</td><td>男</td><td>57</td></tr>
        <tr><td>黎明</td><td>男</td><td>57</td></tr>
    </table>