HTML中设计表格

< table > 、< tr >、< th >、< td >标签:


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<table>
			
			
			<tr>
				
				
				<th>序号th>
				<th>姓名th>
				<th>年龄th>
			tr>
			
			<tr>
				
				
				<td>1td>
				<td>qiangtd>
				<td>22td>
			tr>
			
			<tr>
				<td>2td>
				<td>zhogtd>
				<td>22td>
			tr>
			
			<tr>
				<td>3td>
				<td>shoutd>
				<td>22td>
			tr>
		table>
		
		
	body>
html>

效果:
HTML中设计表格_第1张图片
显然,这并不满足我们对表格表现结果的要求,我们需要进一步约束表格属性;

设置边线:

<head>
	<meta charset="UTF-8">
	<title>title>
	
	<style>
		
		table{
			border: black 1px solid;  /**设置表的边线为黑色,粗细为1px,实线**/
			border-collapse: collapse;  /**设置表的整体边线重叠**/
		}
		
		th{
			border: black 1px solid; /**设置表头元素的边线为黑色,粗细为1px,实线**/
		}
		
		td{
			border: black 1px solid; /**设置表格元素的边线为黑色,粗细为1px,实线**/
		}
		
	style>
	
head>

效果:
HTML中设计表格_第2张图片
到这里可以完成初步表格显示;

常见表:

HTML中设计表格_第3张图片
代码及注释讲解(合并行与合并列):


<html>
	<head>
		<meta charset="UTF-8">
		<title>baidutitle>
		<style>
			table{
				height: 30px;/**设置表格高度**/
				width: 40%;/**设置表格宽度**/
				border: black 1px solid;/**设置表格边线**/
				border-collapse: collapse;/**设置边线重叠**/
				
			}
			th{
				height: 50px;/**设置表头元素高度**/
				text-align: center;/**设置表头元素宽度**/
				vertical-align: middle;/**设置内容竖直居中**/
				border: black 1px solid;/**设置边线**/
			}
			td{
				height: 50px;/**设置高度**/
				text-align: center;/**设置内容水平居中**/
				vertical-align: middle;/**设置竖直居中**/
				border: black 1px solid;/**设置边线**/
			}
			
		style>
	head>
	<body>
		<table>
			<tr>
				
				
				<td colspan="9">2013年度图书销售系统td>
				
			tr>
			<tr>
				
				
				<td rowspan="2">图书分类td>
				<td colspan="2">一季度td>
				<td colspan="2">二季度td>
				<td colspan="2">三季度td>
				<td colspan="2">四季度td>
			tr>
			<tr>
				
				<th>销售量th>
				<th>销售额th>
				<th>销售量th>
				<th>销售额th>
				<th>销售量th>
				<th>销售额th>
				<th>销售量th>
				<th>销售额th>
			tr>
			<tr>
				<td>小说td>
				<td>23521td>
				<td>¥559,940.00td>
				<td>18423td>
				<td>¥44,841.00td>
				<td>32125td>
				<td>¥829,870.00td>
				<td>25188td>
				<td>¥586,564.00td>
			tr>
		table>
	body>
html>

你可能感兴趣的:(HTML中设计表格)