HTML表格(table)属性--左右(colspan)、上下(rowspan)合并、合并边框、位置 部分内容

HTML表格(table)属性--左右(colspan)、上下(rowspan)合并、合并边框、位置 部分内容_第1张图片

border-collapse: collapse; ( 合并边框)

rowspan="2"; (上下合并)

colspan="2";(左右合并)

<html>
	<head>
		<meta charset="utf-8">
		<title>商务风格表格的设计与实现title>
		<style>
			/*设置表格总体样式*/
			#recruit {
				width: 100%;
				border-collapse: collapse;/* 为表格设置合并边框模型: */
				text-align: left;
			}

			/*设置单元格样式*/
			#recruit td,
			#recruit th {
				/* font-size: 1em;*/
				border: 1px solid orange;
				padding: 7px;
			}

			/*设置标题单元格样式*/
			#recruit th {
				background-color: orange;
				color: #ffffff;
			}

			/*设置单元行样式*/
			#recruit tr.orange {
				background-color: #FFEDDB
			}
		style>
	head>
	<body>
		<h3>商务风格表格的设计与实现h3>
		<hr />
		<table id="recruit" border="1">
			<caption>招聘信息表caption>
			<tr>
				<th>地点th>
				<th>招聘职位th>
				<th>公司th>
			tr>
			<tr>
				<td>全国td>
				<td>产品培训生td>
				<td>腾讯td>
			tr>
			<tr class="orange" >
				<td colspan="2">全国(左右合并colspan="2")td>
				<td>前端开发工程师td>
				<td>阿里巴巴td>
			tr>
			<tr >
				<td>上海td>
				<td>交互设计师td>
				<td>网易游戏td>
			tr>
			<tr class="orange" >
				<td>北京td>
				<td>视觉设计师td>
				<td>360td>
			tr>
			<tr >
				<td rowspan="2">深圳(上下合并rowspan="2")td>
				<td>数据分析师td>
				<td>IBMtd>
			tr>
			<tr class="orange">
				<td>杭州td>
				<td>数据研发工程师td>
				<td>微软td>
			tr>
		table>
	body>
html>

border-spacing

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。

			 border-collapse:separate;	/* 默认样式 */
			  border-spacing:10px 50px;

HTML表格(table)属性--左右(colspan)、上下(rowspan)合并、合并边框、位置 部分内容_第2张图片

你可能感兴趣的:(HTML基础知识)