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 ...

随机推荐

Hadoop分布式配置
本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. 请先参照Linux安 ...
JS通过ajax动态读取xml文件内容
http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下 <!DOCTYPE html> <html> <head& ...
实现WMSservice的时候，出现边缘的点或icon被切断的情况
可以通过为实际查询的boundary加一个buffer,使查询的范围比指定的大一点点,这样就会使tile之间在查询的时候有一定的重叠. 如:Geometry queryBoundary = JTS.t ...
解决JS文件页面加载时的阻塞
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...
整数划分 Integer Partition（一）
话说今天百度面试,可能是由于我表现的不太好,面试官显得有点不耐烦,说话的语气也很具有嘲讽的意思,搞得我有点不爽.Whatever,面试中有问到整数划分问题,回答这个问题过程中被面试官搞的不胜其烦,最后 ...
POJ 2105
#include <iostream> #include <cmath> #include <string> using namespace std; int ma ...
$q -- AngularJS中的服务
此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's QCommonJS Promise建议文档将承诺(promise) 作为和异步执行操作(action ...
使用var声明的变量和直接赋值并未声明的变量的区别
在看JS高级程序设计时忽然想到这个问题,众所周知,直接赋值一个变量而为声明,会产生一个全局变量(或者说是全局对象的属性),但用var声明的变量和直接赋值而并未声明的变量都有哪些区别呢,这是我在百 ...
Linux Mint 17 + 小米WIFI创建手机热点
转载:http://www.pppei.net/blog/post/690 亲测可行! 我的系统是linux mint 17.1 64位,所用wifi位小米WIFI. 以下是原文: 此方法在linux ...
web.xml中servlet初始化参数的设置
<context-param><param-name>param1</param-name><param-value>value1</param- ...

HTML表格标签

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

随机推荐

热门专题