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 ...
随机推荐
- 集合类 Collection
1.Collection接口有两个子接口: List:保存元素顺序的线性表,允许有重复元素. Set:不记录元素的保存顺序,不允许有重复元素.数学中的集合 Collection接口中的方法如下: Co ...
- hdu5017 Ellipsoid(旋转)
比赛的时候跳进这个大坑里,最后代码是写出来了.看到好像很多都是模拟退火做的,下面提供一个奇怪的思路吧. ax^2+by^2+cz^2+dyz+exz+fxy=1(*) 通过一些奇特的YY我们可以知道这 ...
- POJ ３６７８
Katu Puzzle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7391 Accepted: 2717 Descr ...
- 大一暑假为期五周的ACM实验室培训结束了(2013.8.24)
没想到,我的大学里第一个暑假,9周的时间只有最初的两周在家待着,接下来的7周将会在学校度过. 说真的,这是我上学以来,第一次真正好好利用的假期.在这五周里,周一.三.五下午学长都会给我们讲点知识,之后 ...
- $q -- AngularJS中的服务
此 承诺/延迟(promise/deferred)实现 的灵感来自于 Kris Kowal's QCommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action ...
- Oracle MySQL
http://blog.jobbole.com/46510/ http://blackproof.iteye.com/blog/1570456 http://blog.csdn.net/yzsind/ ...
- ExtJs之Ext.util.ClickRepeater
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- Linux中ping命令
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...
- Struts2 中的值栈的理解
通过对struts2的一段时间的接触,将自己对OGNL的核心值栈说说,值栈:简单的说,就是存放action的堆栈,当我们提交一个请求 道服务器端 action时,就有个堆栈,如果action在服务器端 ...
- 李洪强漫谈iOS开发[C语言-042]-简单计算器
李洪强漫谈iOS开发[C语言-042]-简单计算器