HTML基础1

表格布局基本不再使用,但DIV+CSS布局的很多知识跟表格布局类似,所以这里还是复习下。把代码贴出来。

<html>
	<head>
		
	</head>
	<body>
	<center>
		<ol start="3">
		    <li>细线表格:用背景色来当成表格线,表框设为0</li>
			<table width="600" bgcolor="black" cellspacing="1" cellpadding="5">
				<tr bgcolor="white">
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr bgcolor="white">
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr bgcolor="white">
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>基本表格</li>
			<table width="600" border="1" bordercolor="black" cellspacing="0" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>默认表格</li>
			<table width="600"  cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>双线表格</li>
			<table width="600" border="1" bordercolor="black" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>合并单元格1</li>
			<table width="600" border="1" bordercolor="black" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td colspan="2">1.2</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td rowspan="2">2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>合并单元格2</li>
			<table width="600" border="1" bordercolor="black" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td colspan="2">2.1</td>
					<td rowspan="2">2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>凸起表格(bordercolorlight下右属性和bordercolordark上左属性)</li>
			<table width="600" border="1" cellpadding="5" bordercolor="blue" bgcolor="gray">
				<tr>
					<td bordercolorlight="black" bordercolordark="white">1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>有表格边框,无单元格边框(table的frame和rules属性)</li>
			<table width="600" cellpadding="5" border="3" bordercolor="#9ED18E" rules="none" cellspacing="0">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
		</ol>
	</center>
	</body>
</html>

 

你可能感兴趣的:(html)