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

随机推荐

ios 图片转视频
转自:http://blog.iosxcode4.com/archives/160 用到的FrameWork有: MediaPlayer.framework,QuartzCore.framework, ...
异步JS：$.Deferred的使用
异步JS:$.Deferred的使用原文链接:http://www.html5rocks.com/en/tutorials/async/deferred/ 当我们构建一个平稳的,响应式的HTML5应 ...
Sqli-labs less 46
Less-46 从本关开始,我们开始学习order by 相关注入的知识. 本关的sql语句为$sql = "SELECT * FROM users ORDER BY $id"; ...
java基础类：Object类和Math类
1.2.3.4.5.6.7.7.
学生信息管理 --- c语言实现
第一次写比较大的程序,昨晚看了大话数据结构有感-----同样求 1+2+3+4+...+100,我则是简单的从1+2+3+4+...+100. 而不是 (1+100) / 2 * 100;(高 ...
POJ 2127
#include <iostream> #define MAXN 501 using namespace std; int a[MAXN],b[MAXN],ans[MAXN]; int G ...
C++ 第一次上机作业
今天完成了C++第一次上机作业,感觉比较简单. 题目: 求2个数或3个正整数中的最大数,用带有默认参数的函数实现. 对3个变量按由小到大顺序排序,要求使用变量的引用. 编写一个程序,用同一个函数名对几 ...
标准管道(popen)
NAME popen, pclose - pipe stream to or from a process SYNOPSIS #include <stdio.h> FILE *popen( ...
BZOJ 1008: [HNOI2008]越狱快速幂
1008: [HNOI2008]越狱 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生 ...
使用git整体流程
一.git提交代码走meger请求的整体流程工作中使用git推代码时,如果走merge请求,那么也就是说拉代码时拉公共代码库的代码,但是提交时需要先提交到自己的代码库,然后在gitlab上提交mer ...

HTML表格标签

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

随机推荐

热门专题