• 表格


    表格

    最基本的表格:

    有4个元素,table,tr,td

    table:定义表格

    tr : table row,定义表格里面的行

    th : table header cell ,定义表头单元格

    td : table data cell,定义数据单元格

    默认情况下,浏览器会对表头单元格(th)里面的内容进行加粗居中的处理,td中的内容可以是文本,图像,列表,和表格。

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
    	<table>
    		<tr>
    			<th>姓名</th>
    			<th>年龄</th>
    		<tr>
    		<tr>
    			<td>太阳骑士</th>
    			<td>25</td>
    		</tr>
    		<tr>
    			<td>洋葱骑士</td>
    			<td>28</td>
    		</tr>
    	</table>
    </body>
    </html>
    

    有边框的表格:

    边框需要用css来实现,border属性

    border-collapse: 用于合并重叠的边框线

    表格标题:

    caption元素:用于给表格添加标题,默认为居中

    caption元素必须紧挨着table元素的开始标签

    设置内边距:

    padding:CSS属性,

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style>
    		table,th,td{
    			border: 1px solid black;
    			border-collapse: collapse;
    			padding: 5px;
    		}
    	</style>
    </head>
    <body>
    	<table>
    		<caption>
    			黑魂小鲜肉汇总
    		</caption>
    		<tr>
    			<th>姓名</th>
    			<th>年龄</th>
    		<tr>
    		<tr>
    			<td>太阳骑士</th>
    			<td>25</td>
    		</tr>
    		<tr>
    			<td>洋葱骑士</td>
    			<td>28</td>
    		</tr>
    	</table>
    </body>
    </html>
    

    背景颜色:

    background

    thead、tbody、tfoot:

    这三个元素可以将表格更严密的分为上中下三部分,对应表头,主体和表尾,tfoot会自动将该段的内容放到表格末尾。

    colspan:

    th和td元素的属性,用来设置单元格横跨的列数

    rowspan:

    th和td元素的属性,用来设置单元格跨行的列数

    colgroup和col:

    可以以列为单位批量的处理单元格。

    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style>
    		table,th,td{
    			border: 1px solid black;
    			border-collapse: collapse;
    			padding: 5px;
    		}
    		th {
    			background: grey;
    			color:white;
    		}
    		thead th {
    			color: red;
    		}
    		tbody th {
    			color: yellow;
    		}
    		tfoot th {
    			color: blue;
    		}
    	</style>
    </head>
    <body>
    	<table>
    	
    		<caption>
    			黑魂小鲜肉汇总
    		</caption>
    		
    		<thead>
    			<tr>
    				<th>姓名</th>
    				<th>年龄</th>
    			<tr>
    		</thead>
    		
    		<tbody>
    			<tr>
    				<th>太阳骑士</th>
    				<td>25</td>
    			</tr>
    		</tbody>
    		
    		<tfoot>
    			<tr>
    				<th>洋葱骑士</th>
    				<td>28</td>
    			</tr>
    		</tfoot>	
    		<tr>
    			<td colspan="2">哈哈哈</td>
    		</tr>
    	</table>
    </body>
    </html>
    
  • 相关阅读:
    java执行spark查询hbase的jar包出现错误提示:ob aborted due to stage failure: Master removed our application: FAILED
    java调用scala 查询hbase数据
    spark1.0.2读取hbase(CDH0.96.1)上的数据
    安装Hadoop系列 — 安装SSH免密码登录
    安装Ubuntu双系统系列——更换源
    安装Ubuntu双系统系列——为Firefox安装Adobe Flash Player
    安装Ubuntu双系统系列——64位Ubuntu安装H3C的INode客户端
    安装Ubuntu双系统系列——安装中文输入法
    安装Ubuntu双系统系列——安装Ubuntu
    智传播客hadoop视频学习笔记(共2天)
  • 原文地址:https://www.cnblogs.com/fate-/p/14338197.html
Copyright © 2020-2023  润新知