day2.3 of 30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html day2.3</title>
	</head>
	<body>
<pre>
	1.如何再网页中插入表格;
		表格有table 标签制作. 每个表格均有若干行, 没行被分割为若干个单元格
		table 中有border 属性, 给其赋值为1,生成的表格有边框
		<table border="1">
			<tr>
				<td>1,2</td><td>3,4</td><td>5,6</td>
			</tr>
			<tr>
				<td>a,b</td><td>c,d</td><td>e,f</td>
			</tr>
		</table>
		
		表格使用table 标签来生成, 在table标签中设置tr来设置行,td往行中添加元素
		表格使用tr标签来生成行,用td标签来生成一个元素.有几个td就有几列
		
		!!!border默认值为0, 即没有边框的表格
		<table>
			<tr>
				<td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>1</td><td>2</td><td>3</td><td>4</td>
			</tr>
		</table>
		
		!!!如何给表格添加标题
		<table border="1">
			<tr>
				<th>Name</th><th>Telephone</th><th>Telephone</th>
			</tr>
			<tr>
				<td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
			</tr>
		</table>
		<table border="1">
			<tr>
				<th>First Name:</th><td>Bill Gates</td>
			</tr>
			<tr>
				<th>Telephone:</th><td>555 77 854</td>
			</tr>
			<tr>
				<th>Telephone:</th><td>555 77 855</td>
			</tr>
		</table>
		
		!!!如何给表格添加标题
		<table border="1">
			<caption>表格标题</caption>
			<tr>
				<th>Month</th><th>Savings</th>
			</tr>
			<tr>
				<td>January</td><td>$100</td>
			</tr>
			<tr>
				<td>February</td><td>$50</td>
			</tr>
		</table>
		
		!!!一个单元格拆分为左右两个
		<table border="1">
			<tr>
				<th>Name</th><th colspan="2">Telephone</th>
			</tr>
			<tr>
				<td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
				
			</tr>
		</table>
		
		!!!一个单元格拆分为上下两个
		<table border="1">
			<tr>
				<th>First Name</th><td>Bill Gates</td>
			</tr>
			<tr>
				<th rowspan="2">Telephone</th>
				<td>555 77 854</td>
			</tr>
			<tr>
				<td>555 77 855</td>
			</tr>		
		</table>
		
		!!!在表格中显示不同的元素
		<table border="1">
			<tr>
				<td>
					<p>这是一个段落</p>
					<p>这是另一个段落</p>
				</td>
				<td>
					<table border="1">
						<tr>
							<p>这个单元格包含一个表格</p>
							<td>A</td><td>B</td>
						</tr>
						<tr>
							<td>C</td><td>D</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<li>apples</li>
					<li>bananas</li>
					<li>pineapples</li>
				</td>
				<td >
HELLO
				</td>
			</tr>
		</table>
		
		!!!设置有单元格边框的表格
		cellpadding设置单元格的内容与边框的空白
		cellspacing设置单元格之间的距离
		<table border="1" cellpadding="100" cellspacing="100">
			<tr><th>First</th><th>Row</th></tr>
			<tr><td>Second</td><td>Row</td></tr>
		</table>
	
</pre>


		
	</body>
</html>

发布了24 篇原创文章 · 获赞 1 · 访问量 1468

猜你喜欢

转载自blog.csdn.net/qq_43077318/article/details/103267380
今日推荐