HTML表格的简单使用1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> /*
* 设置表格的宽度
*/
table{
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
/*border:1px solid black;*/
/*
* table和td边框之间默认有一个距离
* 通过border-spacing属性可以设置这个距离
*/
/*border-spacing:0px ;*/ /*
* border-collapse可以用来设置表格的边框合并
* 如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
/*设置背景样式*/
/*background-color: #bfa;*/
} /*
* 设置边框
*/
td , th{
border: 1px solid black;
} /*
* 设置隔行变色
*/
tr:nth-child(even){
// odd奇数行
background-color: #bfa;
} /*
* 鼠标移入到tr以后，改变颜色
*/
tr:hover{
background-color: #ff0;
} </style>
</head>
<body>
<!--
table是一个块元素
--> <table>
<tr>
<!--
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
</table> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
在网页中也可以来创建出不同的表格。
--> <!--
在HTML中，使用table标签来创建一个表格
-->
<table border="1" width="40%" align="center"> <!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr> <tr>
<td>B1</td>
<td>B2</td>
<td>B3</td> <!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr> </table> </body>
</html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/* * 设置表格的宽度 */table{width: 300px;/*居中*/margin: 0 auto;/*边框*//*border:1px solid black;*//* * table和td边框之间默认有一个距离 *通过border-spacing属性可以设置这个距离 *//*border-spacing:0px ;*//* * border-collapse可以用来设置表格的边框合并 * 如果设置了边框合并，则border-spacing自动失效 */border-collapse: collapse;/*设置背景样式*//*background-color: #bfa;*/}/* * 设置边框 */td , th{border: 1px solid black;}/* * 设置隔行变色 */tr:nth-child(even){background-color: #bfa;}/* * 鼠标移入到tr以后，改变颜色 */tr:hover{background-color: #ff0;}</style></head><body><!--table是一个块元素--><table><tr><!--可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果--><th>学号</th><th>姓名</th><th>性别</th><th>住址</th></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr></table></body></html>
HTML表格的简单使用1的更多相关文章
- 使用Python处理Excel表格的简单方法
使用Python处理Excel表格的简单方法 这篇文章主要介绍了使用Python处理Excel表格的简单方法,本文给大家介绍的非常详细,需要的朋友可以参考下 Excel 中的每一个单元,都会有这些属性 ...
- Java表格的简单使用一
JTable组件使用的是模型/视图/控制器的设计方式,将可视化组件从其数据中分离出来,因此表格中的数据都封装在数据模型中.其中最重要的支持类就是TableModel类,这个类用来定义JTable类以及 ...
- easyUI中treegrid组件构造树形表格（简单数据类型）+ssm后台
这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...
- js+json用表格实现简单网站左侧导航
闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家.这里的数据基于json格式,学习json的朋友可以参考下. 调用很简单,只要将数据组织成json格式即可:格式如下: window.onlo ...
- HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- 使用Python对Excel表格进行简单的读写操作（xlrd/xlwt）
算是一个小技巧吧,只是进行一些简单的读写操作.让人不爽的是xlrd和xlwt是相对独立的,两个模块的对象不能通用,读写无法连贯操作,只能单独读.单独写,尚不知道如何解决. #①xlrd(读) #cod ...
- Java代码导入导出 Excel 表格最简单的方法
import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...
- DW表格的简单应用 之（个人简历模板）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Python读写Excel表格（简单实用）
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:giao窝里giao首先安装两个库:pip install xlrd. ...
随机推荐
- .net连接ORACLE数据库
这段时间维护客户的一个系统,该系统使用的是ORACLE数据库,之前开发的时候用的都是MSSQL,并没有使用过ORACLE.这两种数据库虽然都是关系型数据库,但是具体的操作大有不同,这里作下记录. 连接 ...
- Linux下的定时器类实现(select定时+线程）
更好的计时器类实现:LINUX RTC机制实现计时器类(原创) 很多时候需要在LINUX下用到定时器,但像setitimer()和alarm()这样的定时器有时会和sleep()函数发生冲突,这样就给 ...
- 洛谷P2446 大陆争霸
这是一道dijkstra拓展......不知道为什么被评成了紫题. 有一个很朴素的想法就是每次松弛的时候判断一下那个点是否被保护.如果被保护就不入队. 然后发现写起来要改的地方巨多无比...... 改 ...
- Web应用：当文件超过100KB，无法上传，有种原因你想象不到
今天下午2点多,突然发现凡是文件超过100KB的,在上传的时候都会卡住,但低于100KB的文件可以上传成功. 服务器端使用的是asp无组件上传,为什么突然出现这种问题呢? 我们知道,IIS默认上传限制 ...
- 爬虫acm比赛成绩(多页成绩整合在一起、获取复制不了的数据)(hihocoder、计蒜客)
https://github.com/congmingyige/web-crawler_rank-of-competition-in-JiSuanKe-and-hihocoder 1. 计蒜客(获取复 ...
- EClipse for PHP 中文乱码问题
UTF-8 格式的php,中文都是乱码. 如果此时在EClipse中输入中文会有 CP1252 错误( CP1252不支持xxxx ) 解决方法: windows->preferences-&g ...
- 洛谷【P2458】[SDOI2006]保安站岗 题解 树上DP
题目描述 五一来临,某地下超市为了便于疏通和指挥密集的人员和车辆,以免造成超市内的混乱和拥挤,准备临时从外单位调用部分保安来维持交通秩序. 已知整个地下超市的所有通道呈一棵树的形状:某些通道之间可以互 ...
- linux-2.6.26内核中ARM中断实现详解(转）
转载:http://www.cnblogs.com/leaven/archive/2010/08/06/1794293.html 更多文档参见:http://pan.baidu.com/s/1dDvJ ...
- Python基础【day02】：数据运算（二）
本节内容 数据运算 表达式while 循环 一.数据运算 算数运算: 比较运算: 赋值运算: 逻辑运算: 成员运算: 身份运算: 位运算: #!/usr/bin/python a = 60 # 60 ...
- java的递归查询大体思路
场景:递归查询是我们开发中很常见的,如果没有一个比较好的思路,这将会让我们很头疼. 我这里介绍一个查询部门的例子,希望能给你一些启发 部门sql -- ------------------------ ...