HTML-表格

最新推荐文章于 2022-11-15 19:06:22 发布

森-Js

最新推荐文章于 2022-11-15 19:06:22 发布

阅读量185

点赞数

分类专栏： Java【洗髓】网页基础文章标签： HTML CSS

本文链接：https://blog.csdn.net/gjs935219/article/details/100117479

版权

Java【洗髓】同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

网页基础

12 篇文章 0 订阅

订阅专栏

一、表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<style>
			table{
				border-collapse: collapse;  /*边线收缩*/
			}
			
			/*逗号表示同时指定多个目标的样式*/
			table,td,th{
				border: 1px solid #ccc;
				padding: 50px;
			}
			
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>手机号</th>
			</tr>
			
			<tr>
				<td>2017001</td>
				<td>郭少</td>
				<td>男</td>
				<td>15187456523</td>
			</tr>
			
			<tr>
				<td>2017001</td>
				<td>张少</td>
				<td>女</td>
				<td>18547536201</td>
			</tr>
			
			<tr>
				<td>2017001</td>
				<td>郭少</td>
				<td>男</td>
				<td>15987426350</td>
			</tr>
			
		</table>
	</body>
</html>

二、标题行与数据行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				border-collapse: collapse; /* 边线收缩 */
			}
			
			/* 逗号表示同时指定多个目标的样式 */
			table,td,th{
				/* border: 1px solid #ccc; */
				padding: 10px;
			}
			
			
			tr.head{
				border:0px solid #aaa;
				border-width: 2px 0px;
			}
			
			tr.body{
				border: 0px solid  #ccc;
				border-width: 1px 0px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr class='head'>
				<th> 学号 </th>
				<th> 姓名</th>
				<th> 性别 </th>
				<th> 手机号 </th>
			</tr>
			<tr class="body">
				<td> 20180001 </td>
				<td> 赵 </td>
				<td> 女 </td>
				<td> 18709389990 </td>
			</tr>
			
			<tr class="body">
				<td> 20180002 </td>
				<td> 杨 </td>
				<td> 男 </td>
				<td> 12823293230 </td>
			</tr>
			
			<tr class="body">
				<td> 20180003 </td>
				<td> 李 </td>
				<td> 女 </td>
				<td> 14902392303 </td>
			</tr>
			
		</table>
	</body>
</html>

三、列宽与换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				border-collapse: collapse; /* 边线收缩 */
				table-layout: fixed;    /*自动布局还是固定布局*/
				word-break: break-all;  /*换行设定*/
				word-wrap: break-word;  /*换行折断设定*/
			}
			
			/* 逗号表示同时指定多个目标的样式 */
			table,td,th{
				/* border: 1px solid #ccc; */
				padding: 10px;
				text-align: center;
			}
			
			
			tr.head{
				border:0px solid #aaa;
				border-width: 2px 0px;
			}
			
			tr.body{
				border: 0px solid  #ccc;
				border-width: 1px 0px;
			}
			
			/*列宽设定*/
			table{
				width: 100%;
			}
			table.c1{width: 80px;}
			table.c2{width: 120px;}
			table.c3{width: 60px;}
			table.c4{width: 150px;}
			table.c5{
				width: calc(100% - 80px - 120px - 60px - 150px);
				text-align: left;
				}
		</style>
	</head>
	<body>
		<table>
			<tr class='head'>
				<th class="c1"> 学号 </th>
				<th class="c2"> 姓名</th>
				<th class="c3"> 性别 </th>
				<th class="c4"> 手机号 </th>
				<th class="c5"> 地址 </th>
			</tr>
			<tr class="body">
				<td> 20180001 </td>
				<td> 赵 </td>
				<td> 女 </td>
				<td> 18709389990 </td>
				<td> 北京aaaaaaaaaaaaaaaaaaaaaaaaaa </td>
			</tr>
			
			<tr class="body">
				<td> 20180002 </td>
				<td> 杨 </td>
				<td> 男 </td>
				<td> 12823293230 </td>
				<td> 杭州dddddddddddddddddddddddddddddddddddddddddddddddd </td>
			</tr>
			
			<tr class="body">
				<td> 20180003 </td>
				<td> 李 </td>
				<td> 女 </td>
				<td> 14902392303 </td>
				<td> 上海ssssssssssssssssssssssssssssssssssssssssssssss </td>
			</tr>
			
		</table>
	</body>
</html>

森-Js

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-表格

一、表格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格</title> <style> table{ border-collapse: collapse; /*边线收缩*/ } ...
复制链接

扫一扫