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 ...
随机推荐
- 使用Rails 4.2+ 测试异步邮件系统
[导读]异步测试总是一个很大的问题,邮件发送测试更是让很多开发同学不知道从哪里入手.在新版的Rails里,这类测试在很大程度上被简化了. 以下为译文 在编写需要发送邮件的应用时,控制器是绝不能被阻塞的 ...
- adb或appium下多设备中指定设备的启动
一.先用adb devices列出所有设备序列号 List of devices attached012BDC7N78954789 device132AEC8N57897458 device 二.进入 ...
- What does addScalar do?
The JavaDoc says: SQLQuery org.hibernate.SQLQuery.addScalar(String columnAlias, Type type) Declare a ...
- （转）白话经典算法系列之八 MoreWindows白话经典算法之七大排序总结篇
在我的博客对冒泡排序,直接插入排序,直接选择排序,希尔排序,归并排序,快速排序和堆排序这七种常用的排序方法进行了详细的讲解,并做成了电子书以供大家下载.下载地址为:http://download.cs ...
- node操作MongoDB数据库之插入
在上一篇中我们介绍了MongoDB的安装与配置,接下来的我们来看看在node中怎样操作MongoDB数据库. 在操作数据库之前,首先应该像关系型数据库一样建个数据库把... 启动数据库 利用命令提示符 ...
- 【bzoj2434-阿狸的打字机】AC自动机+fail树+优化
http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=23083 Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一 ...
- 【HDU 5030】Rabbit's String (二分+后缀数组）
Rabbit's String Problem Description Long long ago, there lived a lot of rabbits in the forest. One d ...
- Linux基础--文件与目录管理
1.目录与路径 1)特殊目录 . 代表此层目录 .. 代表上一层目录 - 代表前一个工作目录 ~ 代表『目前使用者身份』所在的家目录 ~account 代表account这个使用者的 ...
- CentOS中通过stat查看文件的元数据
CentOS中可以通过stat查看文件的元数据 [baby@xiaoxiao abc]$ stat honey File: `honey' Size: 25 Blocks: 8 ...
- J2ee 巴巴网站制作（二）
导入spring jar包: