HTML表格标签

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>

HTML表格标签的更多相关文章

H5 表格标签的其它标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
9月6日表格标签（table、行、列、表头）（补）
一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分比两种.网 ...
PHP入门 - - 06-->HTML的表格标签
表格标签<table> <table>的属性: Align: left, center, right (表格的)位置 Border: ...
透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、！！！表格标签<table>
表格标签 <table> 代表表格 width:指表格的宽度一种是像素 (浏览器缩小的时候出现滚动条) 一种是百分比(跟着浏览器的大小而大小) b ...
HTML的表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html系列教程--span style 及表格标签 title video
<span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...
HTML表格标签的使用-<table>
<html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格子标签:<caption ...

随机推荐

Delphi中有序型
有序类型包括:.integer(整型).character(字符型).boolean(布尔型).enumerated(枚举型).subrange(子界型)有序类型定义了一组被排序的值.每个相异值都有唯 ...
HDU 3518 Boring counting（后缀数组，字符处理）
题目参考自:http://blog.sina.com.cn/s/blog_64675f540100k9el.html 题目描述: 找出一个字符串中至少重复出现两次的字串的个数(重复出现时不能重叠). ...
input:text 的value 和 attribute('value') 不是一回事
如题,input:text 当手工输入字符改变其值时,两者就不一样了. 要获得手工输入,不要用attribute('value'), 直接使用value: function getbyid(id){ ...
POJ 2140
#include<iostream> #include<stdio.h> using namespace std; int main() { int num; int i; i ...
消除ComponentOne(C1StudioNet_2013v2) 的注册提示
以后大家如果遇到还有提示,在License文件里添加:C1.Win.C1Command.C1OutBar, C1.Win.C1Command.4, Version=4.0.20132.19568, ...
SVN使用之分支、合并
首先说下为什么我们需要用到分支-合并.比如项目demo下有两个小组,svn下有一个trunk版.由于客户需求突然变化,导致项目需要做较大改动,此时项目组决定由小组1继续完成原来正进行到一半的工作[ ...
HttpWebRequest模拟登陆，存储Cookie以便登录请求后使用
[一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3284481.html] PostLogin :登录,并保存Cookie 1 public st ...
[转]linux CentOS 安装 Nginx
网上找的教程,一路走下来的,原文如下: 一.安装nginx 1.在nginx官方网站下载一个包,下载地址是:http://nginx.org/en/download.html 2.Wi ...
gcc: error trying to exec 'cc1plus': execvp: 没有那个文件或目录
问题: 解决办法: 1.没安装G++ 可使用 sudo apt-get install g++ 进行安装 2.gcc版本和g++版本不相符可利用gcc -v和g++ -v 查看版本
iOS开发--成员变量与属性
属性变量 @interface MyClass:NSObject{ MyObjecct *_object; } @property(nonamtic, retain) MyObjecct *objec ...

HTML表格标签

HTML表格标签的更多相关文章

随机推荐

热门专题