您的位置: 首页  >  IT文章  >  HTML基础一

HTML基础一

分类: IT文章 • 2024-09-10 20:08:49
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>

 

相关推荐