table

最新推荐文章于 2023-10-24 16:03:45 发布

weixin_44793200

最新推荐文章于 2023-10-24 16:03:45 发布

阅读量307

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44793200/article/details/89602349

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1表格的基本标签

行tr

列 td(一般在表格第一行不用td,其余表格td)

th加粗(一般在表格第一行用th,)

表格中有一个或者多个td(th),

<table border="1">
				<tr>
					<th>商品</th>
					<th>数量</th>
					<th>价格（元）</th>
				</tr>	
				<tr>
					<td>牛奶</td>
					<td>13</td>
					<td>5</td>
				</tr>
				<tr>
					<td>面包</td>
					<td>32</td>
					<td>1</td>
				</tr>		
		</table>

运行结果如图所示

2表格的高级标签

<caption>标题

逻辑分区<thead>表头 <tbody>表体 <tfoot>脚注

cellpadding="0" 内容与边框的间距

cellspacing="0" 单元格边框与表格边框的间距

一个表格中有一个或者多个td(th),只有一个<caption>，<thead>， <tbody>， <tfoot>。

thead tbody tfoot 的作用：

突出表中不同的类容

代码所示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表的高级</title>
    <style type="text/css">
				.t1{
					width: 350px;
					  cellspacing="1px" cellpadding="0%"
					   border="1px"
				}
				thead{
					background-color: #7FFFD4;
				
				}
				.tbody{
					background-color: greenyellow;
				}
				tfoot{
					background-color: yellow;
				}
    </style>
</head>
<body>
		<div>
				<table class="t1">
						<caption>年终数据表</caption>
					<thead>
						<tr><th>月份</th><th>收入（RMB）</th></tr>
						</thead >
							<tbody class="tbody">
						<tr><td>1</td><td>100</td></tr>
						<tr><td>2</td><td>80</td></tr>
						<tr><td>3</td><td>300</td></tr>
						<tr><td>4</td><td>400</td></tr>
						<tr><td>5</td><td>100</td></tr>
						<tr><td>6</td><td>200</td></tr>
						
							
							</tbody> 
					
					<tfoot>
						<tr><td>平均月收入</td><td>196.67</td></tr>
						<tr><td>总计</td><td>1180</td></tr>
					</tfoot>
		</div>
</body>
</html>

运行结果如图所示

3不规则表格--表格的跨行和跨列

跨行使用的属性：rowspan

跨列使用的属性：colspan

<div>
			<table border="1px" cellspacing="1px" cellpadding="0%" >
							<tr><th colspan="3"><h1></h1>学生成绩</th></tr>
						<tr>
							<td rowspan="2">李思</td>
							<td>语文</td>
							<td>98</td>
						</tr>
						<tr>
							<td>数学</td>
							<td>95</td></tr>
						<tr>
						<td rowspan="2">张三</td>
						<td>语文</td><td>88</td>
							
						</tr>
						<tr><td>数学</td>
							<td>91</td>
							
						</tr>
				
		</div>

运行结果如图所示