table布局

作者: 丶灰太狼他叔 | 来源:发表于2018-03-11 22:14 被阅读7次

HTML表格、表单
CSS
未知宽高元素的水平垂直居中
前端日记
自学H5Day4
HTML布局
Web前端基础（二）：HTML5与网页入门
css常用布局总结
多列等高布局
菜鸟学习笔记:表格布局和div+css布局

关于table布局的问题，首先height必须要给一个固定的px值，然后就是td一个总的colspan值，下面td设置colspan的值来设置宽度。不过这一行总的colspan的值加起来等于td的colspan的值。
一个例子：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>table布局</title> 
    <style type="text/css">
        td {
            text-align: center;
        }
    </style>
</head>  
<body marginwidth="0px" marginheight="0px">  
    <table width="700px" height="650px" style="background-color: aqua">  
        <tr>  
            <td colspan="10" width="100%" height="20%" style="background-color: chartreuse">这是头部</td>  
        </tr>  
        <tr>  
            <td colspan="2" width="20%" height="40%" style="background-color: antiquewhite">左菜单</td>  
            <td colspan="3"  width="30%" height="40%" style="background-color: coral">左内容</td>  
            <td colspan="2"  width="20%" height="40%" style="background-color: cornflowerblue">右菜单</td>  
            <td colspan="3"  width="30%" height="40%" style="background-color: coral">右内容</td>  
        </tr>  
        <tr>  
            <td width="20%"  height="10%" style="background-color: crimson">公司地址：</td> 
            <td width="80%" colspan="9"  height="20%" style="background-color: crimson">上海市</td>   
        </tr>  
        <tr>  
                <td colspan="2"  height="10%" style="background-color: crimson">公司地址：</td> 
                <td  colspan="3"  height="20%" style="background-color: crimson">上海市</td> 
                <td  colspan="2"  height="20%" style="background-color: crimson">上海市</td>
                <td  colspan="3"  height="20%" style="background-color: crimson">上海市</td>  
            </tr>  
        <tr>  
            <td colspan="10" height="20%" style="background-color: crimson">这是底部</td>  
        </tr>  
    </table>  
</body>  
</html>

效果图：

table.png