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. ...
随机推荐
- django xadmin
1.11.13版本下的[安装]: 1.下载分支版本 https://github.com/nocmt/Xadmin1.11.x/archive/master.zip 2.解压,并将其放在site-pa ...
- 【java】详解native方法的使用
目录结构: contents structure [+] 关于native关键字 使用native关键字 使用步骤 案例 编写.java文件 编译.java文件 获得.h文件 编写hello.cpp文 ...
- double
看double精度 和 数字经过计算后的最小精度
- 洛谷 P1140 相似基因(DP)
传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 参考资料: [1]:https://www.cnblogs.com/real-l/p/9 ...
- 使用WinDbg下的gflags工具导致程序无法执行
问题:the system cannot find file **.exe. 解决方法:开始-运行-输入regedit打开注册表编辑器,找到 HKEY_LOCAL_MACHINE/SOFTWARE/M ...
- 【清北学堂2018-刷题冲刺】Contest 8
Task 1:关联点 [问题描述] ⼆叉树是⼀种常用的数据结构,⼀个⼆叉树或者为空,或者由根节点.左⼦树.右⼦树构成,其中左⼦树和右⼦树都是⼆叉树. 每个节点a 可以存储⼀个值val. 显然,如果 ...
- Scala进阶之路-Scala高级语法之隐式(implicit)详解
Scala进阶之路-Scala高级语法之隐式(implicit)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们调用别人的框架,发现少了一些方法,需要添加,但是让别人为你一 ...
- IDEA中导入多个包自动合并为星号
IDEA中导入同一个包下的几个class会自动合并为星号,如下图.可以通过设置让其不自动合并为星号. 1.选择File→Settings→Editor→Code style→Java,再点击右边的Im ...
- Networx蓝屏问题
本人系统win7专业版64位. 从5月底开始就时不时有蓝屏发生,而且可以说是没有任何征兆就"啪"的一下蓝了... 有时候是隔个四五天蓝屏一次,有时候一天都能蓝好几次,实在是让人恼火 ...
- Entry point (0x08000000) points to a Thumb instruction but is not a valid Thumb code pointer.
1.菜单 project-options-linker-misc controls加入 --entry Reset_Handler --first __Vectors 2.导入startup_stm3 ...