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 ...
随机推荐
- .NET设计模式（13）：享元模式（Flyweight Pattern）（转）
摘要:面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情况下,对象的数量可能会太多,从而导致了运行时的代价.那么我们如何去避免大量细粒度的对象,同时又不影响客户程序使用面 ...
- 服务端发送xml请求java代码示例
/** * */ package com.autoyol.pay.cmb.core; import java.io.ByteArrayOutputStream; import java.io.IOEx ...
- Web前端名词释义及原理
引言:看题目的时候,不要觉得这是一个很深奥的问题,Web前端这些东西很多就是叫的名字牛逼,其实原理很TM简单,也就那么回事. 一.javascript名词释义 1.啥是事件队列? 就是 弄一个数组,里 ...
- delphi 中几种多线程操作方式
在了解多线程之前我们先了解一下进程和线程的关系 一个程序至少有一个主进程,一个进程至少有一个线程. 为了保证线程的安全性请大家看看下面介绍 Delphi多线程同步的一些处理方案大家可以参考:http: ...
- Hungary（匈牙利算法）——二分图最大匹配
在复习匈牙利算法的时候,发现这么一篇介绍匈牙利算法的文章,非常通俗易懂,所以就借鉴过来了. 复杂度:邻接矩阵:O(v^3)邻接表:O(V*E) 附上链接:趣写算法系列之--匈牙利算法 下面就附上代码吧 ...
- jvm 之 国际酒店 6月25日上线内存溢出原因
6月25日OMS,Ihotel上线成功后执行了一个批处理,SOA报警提示某一台IHOTEL机器调用OMS失败率大于阀值,登录这个机器后发现这台机器CPU使用率处于80%以上,调用OMS有的时候超过5秒 ...
- mvc5 错误页如何定义
项目根目录下的Web.config <system.web> <customErrors mode="On" defaultRedirect="~/Er ...
- SharePoint文档库文件大小限制（win2008+II7）问题
我们在用SharePoint存储文档时,用户要上传五十多MB到站点上,结果受到上传大小限制.在管理中心里做了修改,增加了上载大小限制.可是用户在上传的时候,提示复制一个或多个文件失败(win2003) ...
- JS加载时间线
1.创建Document对象,开始解析web页面.解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中.这个阶段document.readyState = 'loading' ...
- （.iso）光盘镜像文件的打开与安装
直接解压就可以打开,然后就可以安装.exe文件