前端三十二:表格

网页默认是流布局,不能够随意摆放位置。

表格的作用就是用来做页面布局。

 

 单元格中数据的对齐方式:

  对齐分为水平对齐和垂直对齐

  水平对齐是:align=center,left, right

  垂直对齐是:valign=top, middle, bottom

 

  间距和填充

    单元格间距: 单元格和单元格之间的距离。默认2像素       cellspacing

    单元格填充: 内容距离单元格边框的距离。 默认1个像素  cellpadding

    

<table border="1px" height="200px" width="600px" bordercolor="#FF0000" cellspacing="0px" cellpadding="0px" align="center" >
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>

        <tr>
            <td valign="top" >贾宝玉</td>
            <td align="center">男</td>
            <td align="right" valign="bottom" >少爷</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>男</td>
            <td>大师兄</td>
        </tr>
    </table>

合并单元格

   合并单元行:把不同的行合并成一行

   合并单元列: 把不同的列合并成一列 

<table border="1px" width="500px" height="400px" align="center">
        <tr>
            <th colspan="3">名著</th>
        </tr>

        <tr>
            <td width="30%">红楼梦</td>
            <td width="30%">曹雪芹</td>
            <td align="center" rowspan="4">明<br/><br/>清</td>
        </tr>
        <tr>
            <td>水浒传</td>
            <td>施耐庵</td>
        </tr>
        <tr>
            <td>三国演义</td>
            <td>罗贯中</td>
        </tr>
        <tr>
            <td>西游记</td>
            <td>吴承恩</td>
        </tr>

    </table>