html之table详解

table标签

1、表格属性

•  border  设置表格的边框大小
• algin  设置表格内容的对齐方式 
• cellpadding 设置单元格的间距
• cellspacing 设置像素间隙

具体的例子代码如下图

<table border="2" bordercolor="blue" width="200" cellpadding="5" cellspacing="2"  align="center"> 
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>

    </table>

运行结果

2、td的跨行跨列属性

• rowspan 定义单元格纵跨的行数，说通俗一点就是合并单元格。
• colspan   定义单元格横跨的列数。

<table border="2" bordercolor="blue" width="200" cellpadding="5" cellspacing="2"  align="center"> 
        <tr>
            <td rowspan="4">1</td>
            <td rowspan="3">1</td>
            <td rowspan="2">1</td>
            <td>1</td>
        </tr>
        <tr>
            
            
            
            <td>1</td>
        </tr>
        <tr>
            
         
            <td rowspan="2">1</td>
            <td>1</td>
        </tr>
        <tr>
            
         
            <td>1</td>
            <td>1</td>
        </tr>
    </table>

 

显示结果呢就是如下图

一定要注意rowspan和colspan是作用于td标签，rowspan其实很好理解，就像上面的这个图，首先这是一个4*4的表格，第一列变成了一个那么rowspan肯定是要设置为4，那么从第二行到第四行的第一列都应该删除，同理rowspan为3的时候，最后一个tr的td得留着，中间的td删除；第三列的时候因为有两个合并，所以要在第一行和第三行的td里设置rowspan为2，删除第二行和第四行的td。

3、完整的表格

• caption  在表格的上方中间位置显示标题<caption>标题内容</caption>
• thead     表格的表头
• tbody     表格的内容
• tfoot       表格的底部

   <table border="1" width="600" align="center">
        <caption>学生信息表</caption>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭住址</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td align="center">001</td>
            <td>Tom*</td>
            <td>aaaaaaaaaaa</td>
            <td>该生为“三好学生”</td>
        </tr>
        <tr>
            <td align="center">002</td>
            <td>Mickle</td>
            <td>bbbbbbbbb</td>
            <td></td>
        </tr>
        <tr>
            <td align="center">003</td>
            <td>Mary*</td>
            <td>cccccccc</td>
            <td></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="4">附注：*为优秀学生。</td>
        </tr>
        </tfoot>
    </table>

4. border-collapse

如上面的图，显示出来的表格都是双线，使用了border-collapse就可以变成单线边框。

使用在table属性里如：

<table style="border-collapse:collapse">

这里要注意的是 border-collapse要写在style里面，而border不用写在style里面。