HTML表格的简单使用1
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 /*
9 * 设置表格的宽度
10 */
11 table{ 12 width: 300px;
13 /*居中*/
14 margin: 0 auto;
15 /*边框*/
16 /*border:1px solid black;*/
17 /*
18 * table和td边框之间默认有一个距离
19 * 通过border-spacing属性可以设置这个距离
20 */
21 /*border-spacing:0px ;*/
22
23 /*
24 * border-collapse可以用来设置表格的边框合并
25 * 如果设置了边框合并，则border-spacing自动失效
26 */
27 border-collapse: collapse;
28 /*设置背景样式*/
29 /*background-color: #bfa;*/
30 }
31
32 /*
33 * 设置边框
34 */
35 td , th{ 36 border: 1px solid black;
37 }
38
39 /*
40 * 设置隔行变色
41 */
42 tr:nth-child(even){ 43 // odd奇数行
44 background-color: #bfa;
45 }
46
47 /*
48 * 鼠标移入到tr以后，改变颜色
49 */
50 tr:hover{ 51 background-color: #ff0;
52 }
53
54
55 </style>
56 </head>
57 <body>
58 <!--
59 table是一个块元素
60 -->
61
62 <table>
63 <tr>
64 <!--
65 可以使用th标签来表示表头中的内容，
66 它的用法和td一样，不同的是它会有一些默认效果
67 -->
68 <th>学号</th>
69 <th>姓名</th>
70 <th>性别</th>
71 <th>住址</th>
72 </tr>
73 <tr>
74 <td>1</td>
75 <td>孙悟空</td>
76 <td>男</td>
77 <td>花果山</td>
78 </tr>
79 <tr>
80 <td>2</td>
81 <td>猪八戒</td>
82 <td>男</td>
83 <td>高老庄</td>
84 </tr>
85 <tr>
86 <td>3</td>
87 <td>沙和尚</td>
88 <td>男</td>
89 <td>流沙河</td>
90 </tr>
91 <tr>
92 <td>4</td>
93 <td>唐僧</td>
94 <td>男</td>
95 <td>女儿国</td>
96 </tr>
97 <tr>
98 <td>1</td>
99 <td>孙悟空</td>
100 <td>男</td>
101 <td>花果山</td>
102 </tr>
103 <tr>
104 <td>2</td>
105 <td>猪八戒</td>
106 <td>男</td>
107 <td>高老庄</td>
108 </tr>
109 <tr>
110 <td>3</td>
111 <td>沙和尚</td>
112 <td>男</td>
113 <td>流沙河</td>
114 </tr>
115 <tr>
116 <td>4</td>
117 <td>唐僧</td>
118 <td>男</td>
119 <td>女儿国</td>
120 </tr>
121 <tr>
122 <td>1</td>
123 <td>孙悟空</td>
124 <td>男</td>
125 <td>花果山</td>
126 </tr>
127 <tr>
128 <td>2</td>
129 <td>猪八戒</td>
130 <td>男</td>
131 <td>高老庄</td>
132 </tr>
133 <tr>
134 <td>3</td>
135 <td>沙和尚</td>
136 <td>男</td>
137 <td>流沙河</td>
138 </tr>
139 <tr>
140 <td>4</td>
141 <td>唐僧</td>
142 <td>男</td>
143 <td>女儿国</td>
144 </tr>
145 <tr>
146 <td>1</td>
147 <td>孙悟空</td>
148 <td>男</td>
149 <td>花果山</td>
150 </tr>
151 <tr>
152 <td>2</td>
153 <td>猪八戒</td>
154 <td>男</td>
155 <td>高老庄</td>
156 </tr>
157 <tr>
158 <td>3</td>
159 <td>沙和尚</td>
160 <td>男</td>
161 <td>流沙河</td>
162 </tr>
163 <tr>
164 <td>4</td>
165 <td>唐僧</td>
166 <td>男</td>
167 <td>女儿国</td>
168 </tr>
169 <tr>
170 <td>1</td>
171 <td>孙悟空</td>
172 <td>男</td>
173 <td>花果山</td>
174 </tr>
175 <tr>
176 <td>2</td>
177 <td>猪八戒</td>
178 <td>男</td>
179 <td>高老庄</td>
180 </tr>
181 <tr>
182 <td>3</td>
183 <td>沙和尚</td>
184 <td>男</td>
185 <td>流沙河</td>
186 </tr>
187 <tr>
188 <td>4</td>
189 <td>唐僧</td>
190 <td>男</td>
191 <td>女儿国</td>
192 </tr>
193 <tr>
194 <td>1</td>
195 <td>孙悟空</td>
196 <td>男</td>
197 <td>花果山</td>
198 </tr>
199 <tr>
200 <td>2</td>
201 <td>猪八戒</td>
202 <td>男</td>
203 <td>高老庄</td>
204 </tr>
205 <tr>
206 <td>3</td>
207 <td>沙和尚</td>
208 <td>男</td>
209 <td>流沙河</td>
210 </tr>
211 <tr>
212 <td>4</td>
213 <td>唐僧</td>
214 <td>男</td>
215 <td>女儿国</td>
216 </tr>
217 </table>
218
219 </body>
220 </html>
221 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <!-- 9 表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具， 10 表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单 11 在网页中也可以来创建出不同的表格。 12 --> 13 14 <!-- 15 在HTML中，使用table标签来创建一个表格 16 --> 17 <table border="1" width="40%" align="center"> 18 19 <!-- 20 在table标签中使用tr来表示表格中的一行，有几行就有几个tr 21 --> 22 <tr> 23 <!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td --> 24 <td>A1</td> 25 <td>A2</td> 26 <td>A3</td> 27 <td>A4</td> 28 </tr> 29 30 <tr> 31 <td>B1</td> 32 <td>B2</td> 33 <td>B3</td> 34 35 <!-- 36 rowspan用来设置纵向的合并单元格 37 --> 38 <td rowspan="2">B4</td> 39 </tr> 40 <tr> 41 <td>C1</td> 42 <td>C2</td> 43 <td>C3</td> 44 </tr> 45 <tr> 46 <td>D1</td> 47 <td>D2</td> 48 <!-- 49 colspan横向的合并单元格 50 --> 51 <td colspan="2">D3</td> 52 </tr> 53 54 </table> 55 56 </body> 57 </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>
转载于:https://www.cnblogs.com/fuck1/p/7469132.html
HTML表格的简单使用1相关推荐
- 修改所有列_多人编辑，自动汇总，领导可见所有？用 SeaTable 表格更简单
在日常办公中,经常会遇到这种情况,需要大家协作填写某个表格的数据,以便快速高效地汇总数据,同时为了保证填写人不能看到和修改别人的数据,就需要每个填写人只能看到自己所填写的数据,而表格数据收集人能看到所 ...
- 表格为一条细线的html代码,html制作细线表格的简单实例
原标题:html制作细线表格的简单实例 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellspacing=&quo ...
- 按钮提交所有数据_多人编辑，自动汇总，领导可见所有？用 SeaTable 表格更简单...
在日常办公中,经常会遇到这种情况,需要大家协作填写某个表格的数据,以便快速高效地汇总数据,同时为了保证填写人不能看到和修改别人的数据,就需要每个填写人只能看到自己所填写的数据,而表格数据收集人能看到所 ...
- python处理excel案例_使用Python处理Excel表格的简单方法
使用Python处理Excel表格的简单方法 Excel 中的每一个单元,都会有这些属性:颜色(colors).number formatting.字体(fonts).边界(borders).alig ...
- R语言提取PDF表格数据#简单！！！
R语言提取PDF表格数据#简单!!! #需要用到pdftables包以及api号,api需要从https://pdftables.com网站注册申请api,一般申请后可以免费转50页pdf insta ...
- html制作检测结果表格,HTML_html制作细线表格的简单实例，关于这个细线表格的制作方法 - phpStudy...
html制作细线表格的简单实例 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellspacing="1& ...
- 用一句JQuery代码实现表格的简单筛选
JQuery的强大之处,这里就不用讲了.这里将用一行简单的JQuery代码实现简单的表格筛选.先贴上代码: 代码 <%@ Page Language="C#" AutoEve ...
- python与excel表格-超简单：用Python让Excel飞起来
超简单:用Python让Excel飞起来 作者:王秀文;郭明鑫;王宇韬 编著 出版日期:2020年07月 文件大小:20.30M 支持设备: ￥45.00在线试读 适用客户端: 言商书局 iPad/i ...
- jqGrid表格展示简单实例
今天试了一下用jqGrid插件展示表格,里面有当前表格搜索.排序.编辑.分页等很多功能,感觉挺好用的,准备记录一下.在的Controller中根据条件查询到数据, import com.alibaba ...
- 使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历 姓名 性别 出生日期 照片 民族 政治面貌 婚姻状况 现所在地 籍贯 学历 毕业学校 专 ...
最新文章
- 包含Tomcat 9的JBoss Web Server 5已发布
- 【Java】Java_05 标识符与字符集
- python生成多维数组方法总结（多维创建有问题的情况）
- oracle 韩思捷_Oracle数据库技术服务案例精选
- 微信小程序适配iphonex
- MVC 中Simditor上传本地图片
- java的foreach_深入理解java中for和foreach循环
- cocos2d-x for wp8 设置横竖屏
- 不合群的人，经常习惯一个人独来独往，这样的人有出息吗？
- CFT每日一题之 天下武功，唯快不破
- ASUS ROG Win10.21H1 x64专业工作站极速精简优化版
- printf 输出的数据类型
- Rust笔记——解决 Blocking waiting for file lock on build directory
- 源码解读之Pre-train
- 使用 Nginx 构建前端日志统计服务（打点采集）服务
- vue+photo-sphere-viewer 渲染全景图片，带给你沉浸式体验
- CuteOne基于Python3的OneDrive多网盘挂载程序+带会员
- 拼多多新任CEO不“追风”
- OSError: image file is truncated与PIL.UnidentifiedImageError: cannot identify image file的解决方案
- 人工智能--生成对抗网络