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">软件开发 网站推广</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 ...
随机推荐
- VS调试Libevent流程
下载源码包: libevent--stable.tar.gz 第一:编译libevent 进入VS2010命令提示,切换到libevent的所在目录 nmake /f Makefile.nmake 编 ...
- JS通过ajax动态读取xml文件内容
http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下 <!DOCTYPE html> <html> <head& ...
- Effeckt.css项目：CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- Grid行编辑插件
//操作列不显示应该就是autoLoad的问题. Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "E ...
- HTML5程序设计--SVG
SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...
- HDU4836 The Query on the Tree(树状数组&&LCA)
由于智力的问题,百度之星完全lu不动..开场看第一题根据题目给的条件我觉得一定是可以构造出来的,题目给的意思颇有鸽巢原理的感觉,于是觉得开场第一题应该就是智力构造题了,想了半个小时,发现完全想不动,于 ...
- HDU 2571 命运 动态规划
命运 http://acm.hdu.edu.cn/showproblem.php?pid=2571 Problem Description 穿过幽谷意味着离大魔王lemon已经无限接近了!可谁能想到, ...
- C# 枚举类型操作
//定义一个枚举 public enum Colors { Red, Green, Blue, Yellow }; //根据key找value string name = Enum.GetName(t ...
- DFS+剪枝 HDOJ 5323 Solve this interesting problem
题目传送门 /* 题意:告诉一个区间[L,R],问根节点的n是多少 DFS+剪枝:父亲节点有四种情况:[l, r + len],[l, r + len - 1],[l - len, r],[l - l ...
- lintcode：形状工厂
题目 工厂模式是一种常见的设计模式.实现一个形状工厂 ShapeFactory 来创建不同的形状类.这里我们假设只有三角形,正方形和矩形三种形状. 样例 ShapeFactory sf = new S ...