HTML表格标签

浏览数：47 / 时间：2015年06月09日

table标签的用途：在表格中放图片，或用于布局(已经淘汰掉了)，存放数据

table制作过程:
　　1.先分析表格有多少行
　　2.分析有多少列
　　3.做好表格的基本之后再添加表格需要的一些属性

table表格标签属性:
　　width:可以固定表格的宽度，单位可以用像素或百分比
　　height：可以定义表格的高度
　　bgcolor:表格背景色
　　background：背景图片
　　border：设置边框的宽度，默认为0
　　bordercolor：表格边框的颜色
　　cellpadding:设置表格单元格边框与其内部内容之间空间的大小，默认为2
　　cellspacing：表格单元格之间的空间大小（单元格之间的间距）
　　align:设置表格的对齐方式（left center right）
　　bordercolorlight:设置边框亮部分的颜色（当border的值大于或等于1才有用）
　　bordercolordark:设置边框暗部分的颜色（当border的值大于或等于1才有用）

设置行：<tr>..</tr>
设置标题的栏位(单元格):<th>..</th>
设置数据的栏位（单元格）： <td>..</td>

<table>
        <tr> 
            <td>
                   姓名：张三
            </td>
      </tr>
        <tr>
            <td>
                年龄：33
            </td>
        </tr>
</table>

<table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#CC0000" align="center">
        <tr>
            <th>语文</th>
            <th>数学</th>
            <th>外语</th>
            <th>化学</th>
            <th>物理</th>
            <th>生物</th>
            <th>政治</th>
            <th>历史</th>
            <th>地理</th>
        </tr>
        <tr>
            <td>90</td>
            <td>98</td>
            <td>80</td>
            <td>89</td>
            <td>91</td>
            <td>89</td>
            <td>78</td>
            <td>87</td>
            <td>86</td>
        </tr>
</table>

单元格的属性：

　　align：设置单元格的水平对齐方式
　　valign：设置单元格的垂直对齐方式
　　rowspan：行合并的数目
　　colspan：列合并的数目
　　nowarp：设置单元格中不换行

1、基础表格

<table border="1" cellspacing="0" width="500" cellpadding="5">
                    <tr>
                        <td>影视广告</td>
                        <td>网页设计</td>
                        <td>动画设计</td>
                    </tr>
                    <tr>
                        <td>软件开发</td>
                        <td>网站建设</td>
                        <td>网站推广</td>
                    </tr>
                    <tr>
                        <td>平面设计</td>
                        <td>安卓开发</td>
                        <td>前台美工</td>
                    </tr>
</table>

2、合并多列表格

<table border="1" cellspacing="0" width="500" cellpadding="5">
            <tr>
                <td colspan="3" align="center" valign="top">影视广告</td>
            </tr>
            <tr>
                <td>软件开发</td>
                <td>网站建设</td>
                <td>网站推广</td>
            </tr>
            <tr>
                <td>平面设计</td>
                <td>安卓开发</td>
                <td>前台美工</td>
            </tr>
</table>

3、合并多行表格

<table border="1" cellspacing="0" width="500" cellpadding="5">
    <tr>
        <td rowspan="3" align="center" valign="bottom">影视广告</td>
        <td>网页设计</td>
        <td>动画设计</td>
    </tr>
    <tr>
        <td>软件开发</td>
        <td>网站建设</td>

    </tr>
    <tr>
        <td>平面设计</td>
        <td>安卓开发</td>
        
    </tr>
</table>

4、复杂表格1

<table border="1" cellspacing="0" width="500" cellpadding="5">
    <tr>
        <td>影视广告</td>
        <td colspan="2" align="center">网页设计</td>
        
    </tr>
    <tr>
        <td>软件开发</td>
        <td rowspan="2">网站建设<br/>前台美工</td>
        <td>网站推广</td>
    </tr>
    <tr>
        <td>平面设计</td>
        <td>安卓开发</td>
        
    </tr>
</table>

5、复杂表格2

<table border="1" cellspacing="0" width="500" cellpadding="5">
    <tr>
        <td>影视广告</td>
        <td >网页设计</td>
        <td>动画设计</td>
    </tr>
    <tr>
        <td colspan="2">软件开发&nbsp;网站推广</td>
        <td rowspan="2">网站建设<br/>前台美工</td>
       
    </tr>
    <tr>
        <td>平面设计</td>
        <td>安卓开发</td>
        
    </tr>
</table>

6、凸起效果表格

<table width="500" border="1" cellpadding="5" bgcolor="#999999" bordercolordark="#000000" bordercolorlight="#FFFFFF">
    <tr  bordercolordark="#FFFFFF" bordercolorlight="#000000">
        <td>影视广告</td>
        <td>网页设计</td>
        <td>动画设计</td>
    </tr>
    <tr bordercolordark="#FFFFFF" bordercolorlight="#000000">

        <td>软件开发</td>
        <td>网站建设</td>
        <td>网站推广</td>
    </tr>
    <tr bordercolordark="#FFFFFF" bordercolorlight="#000000">
        <td>平面设计</td>
        <td>安卓开发</td>
        <td>前台美工</td>
    </tr>
</table>

7、凸起效果表格

<table width="500" border="1" cellpadding="5" bgcolor="#999999"  bordercolordark="#000000" bordercolorlight="#999999">
    <tr>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">影视广告</td>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">网页设计</td>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">动画设计</td>
    </tr>
    <tr>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">软件开发</td>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">网站建设</td>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">网站推广</td>
    </tr>
    <tr>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">平面设计</td>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">安卓开发</td>
        <td bordercolordark="#000000" bordercolorlight="#FFFFFF">前台美工</td>
    </tr>
</table>

8、细线表格效果

细线表格效果的过程：将表格自身的粗细去掉 border=0，设置表格的背景颜色，设置表格与单元格之间的距离cellspacing="1"，给每个tr设置bgcolor颜色

<table border="0" cellspacing="1" width="500" cellpadding="5" bgcolor="#000000">
    <tr bgcolor="#FFFFFF">
        <td>影视广告</td>
        <td>网页设计</td>
        <td>动画设计</td>
    </tr>
    <tr bgcolor="#FFFFFF">
        <td>软件开发</td>
        <td>网站建设</td>
        <td>网站推广</td>
    </tr>
    <tr bgcolor="#FFFFFF">
        <td>平面设计</td>
        <td>安卓开发</td>
        <td>前台美工</td>
    </tr>
</table>

9、练习课程表

<table border="1" width="600" cellpadding="6" cellspacing="0">
    <tr align="center">
        <td>项目</td>
        <td colspan="5">上课</td>
       
        <td colspan="2">休息</td>
    </tr>
    
    <tr align="center">
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
    </tr>
    
    <tr align="center">
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
    </tr>
    
    
    <tr align="center">
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>计算机</td>
        <td>化学</td>
       
       
    </tr>
    
    <tr align="center">
        <td>生物</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>语文</td>
        <td>语文</td>
       
      
    </tr>
    
    <tr align="center">
        <td>数学</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>地理</td>
        <td>物理</td>
        
       
    </tr>
    
    <tr align="center">
        <td rowspan="2">下午</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>地理</td>
        <td>历史</td>
        <td>计算机</td>
        <td rowspan="2">休息</td>
    </tr>
    
    <tr align="center">
        <td>物理</td>
        <td>历史</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>计算机</td>
        
       
    </tr>
</table>