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 ...
随机推荐
- Nodejs Express 4.X 中文API 4--- Router篇
相关阅读: Express 4.X API 翻译[一] -- Application篇 Express4.XApi 翻译[二] -- Request篇 Express4.XApi 翻译[三] -- ...
- linux 访问ntfs分区
打开ntfs-3g的下载点http://www.tuxera.com/community/ntfs-3g-download/ ,将最新稳定(当前最新版本为ntfs-3g-2011.1.15)下载到Ce ...
- 用linux服务器下的/dev/shm/来释放磁盘的压力
巧用linux服务器下的/dev/shm/来释放磁盘的压力 浏览:646 | 更新:2013-06-18 18:08 | 标签: 磁盘 tmpfs是Linux/Unix系统上的一种基于内存的文件系统. ...
- poj 2068 Nim 博弈论
思路:dp[i][j]:第i个人时还剩j个石头. 当j为0时,有必胜为1: 后继中有必败态的为必胜态!!记忆化搜索下就可以了! 代码如下: #include<iostream> #incl ...
- （转）两分钟彻底让你明白Android Activity生命周期(图文)!
转自: http://blog.csdn.net/android_tutor/article/details/5772285 大家好,今天给大家详解一下Android中Activity的生命周期,我在 ...
- LINUX输入输出与文件——续
1 目录操作 改变目录或文件的访问权限 #include <sys/stat.h> int chmod(const char *path, mode_t mode); //mode形如07 ...
- 集成 Tomcat 插件到 Eclipse 的过程
Java代码: . 下载 Tomcat Tomcat6,下载地址:http://tomcat.apache.org/download-60.cgi,选择绿色版的 zip 进行下载(目前最新的 Tomc ...
- lintcode：背包问题II
背包问题II 给出n个物品的体积A[i]和其价值V[i],将他们装入一个大小为m的背包,最多能装入的总价值有多大? 注意事项 A[i], V[i], n, m均为整数.你不能将物品进行切分.你所挑选的 ...
- shape和selector的结合使用
shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...
- vim不保存退出
对于刚开始使用vi/vim文本编辑器的新手来说,如何在不保存更改而退出vi/vim 文本编辑器呢? 当你使用linux vi/vim 文本编辑器对linux下某个配置文件做编辑操作,当你更改完之后,可 ...