WEB前端：(5)HTML5④表格

@实例表格：宽高是均匀的

<table></table>里面的属性

• border:边框粗细
• cellpadding:单元格内边距
• cellspacing:单元格外间距

一个tr为一行，一个td为一个单元格

<h3>实例表格</h3>
<!--边框粗细为1px 单元格内边距为10px 单元格外间距为5px-->
<table border="1" cellpadding="10" cellspacing="5">

    <!--一个tr为一行，一个td为一个单元格-->
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
</table>

@产品列表：每列每行都是不均匀的

<th>表头</th>   字号默认粗一点

<th>对齐方式：

竖直方向对齐方式：valign 值是top，bottom，middle，

水平方向对齐方式：align 值是right，left，center

推荐的在线文档：http://t.mb5u.com/html/

<h3>产品列表</h3>
<!--指定表格宽高，浏览器会自动计算行列的宽高-->
<table border="1" width="500" height="300">
    <!--第一行全部为表头-->
    <tr>
        <th valign="middle">序号</th>
        <th>产品名称</th>
        <th>产品价格</th>
        <th>产品数量</th>
    </tr>

    <tr>
        <!--可以通过align和valign设置内容的水平和垂直对齐方式，具体取值可以查看在线文档-->
        <!--推荐的在线文档：http://t.mb5u.com/html/-->
        <td align="center" valign="top">1</td>
        <td align="center">苹果</td>
        <td>¥5.00</td>
        <td>1000</td>
    </tr>
</table>

@个人简历表 跨行跨列

• colspan="5"  表示横跨5列
• rowspan="5" 表示跨5行

<h3>个人简历表</h3>
<table border="1" width="600" height="300">
    <!--横跨5列-->
    <tr>
        <th colspan="5" align="left">基本情况</th>
    </tr>

    <!--宽度使用占全局的百分比进行设置-->
    <tr>
        <td width="18%">姓名</td>
        <td width="18%"></td>
        <td width="18%">性别</td>
        <td width="18%"></td>
        <!--这是一个跨5行的单元格-->
        <!--单元格中放置的内容为一张图片-->
        <td rowspan="5" width="28%">
            <!--指定图片的具体宽高-->
            <!--width和height是一个很多标签都可以设置的通用属性-->
            <img src="images/person.png" alt="人物图片" width="150px" height="150px">
        </td>
    </tr>
</table>

以上是按比例划分宽高。