html table with matrix effect

最新推荐文章于 2025-05-02 17:35:32 发布

totogogo

最新推荐文章于 2025-05-02 17:35:32 发布

阅读量891

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB 2.0 文章标签： matrix table html class border float

本文链接：https://blog.youkuaiyun.com/totogogo/article/details/7464554

WEB 2.0 专栏收录该内容

18 篇文章

订阅专栏

本文提供了两个HTML页面示例，展示了如何使用CSS对表格进行样式设置。第一个示例展示了一个简单的带有边框的表格，并为特定单元格设置了红色边框。第二个示例则更进一步，展示了如何实现更复杂的表格布局，包括单元格背景颜色的交替变化、表格边框的折叠效果以及多个并排显示的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同事帮写的。

test1.html

<html>
	<head></head>
	<style type="text/css">
		table {border: 1px solid #000;}
		td.item {border: 1px solid #f00;}
	</style>
	<body>
		<table>
			<tbody>
				<tr>
					<td class="item">a</td>
					<td class="item">b</td>
					<td class="item">c</td>
				</tr>
				<tr>
					<td class="blank"></td>
					<td class="item">y</td>
					<td class="item">z</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

test2.html

<html>
	<head></head>
	<style type="text/css">
		table {
			border: 1px solid #000;
			border-collapse: collapse;
		}
		div.test-table {
			float: left;			
		}
		div.test-table + div.test-table {margin-left: 1px;}
		th, td.item {
			
			border: 1px solid #ccc;
			padding: 0px 5px;
			height: 1.5em;
		}
		td.odd {background-color: #eee;}
		td.even {background-color: #fff;}
	</style>
	<body>
		<div class="test-table">
			<table>
				<tbody>
					<tr>
						<th colspan="2">Compare</th>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd">x</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="test-table">
			<table>
				<tbody>
					<tr>
						<th colspan="2">Compare</th>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd"></td>
					</tr>
					<tr>
						<td class="item even">x</td>
						<td class="item even">x</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="test-table">
			<table>
				<tbody>
					<tr>
						<th colspan="2">Compare</th>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd">x</td>
					</tr>
					<tr>
						<td class="item even"></td>
						<td class="item even"></td>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd"></td>
					</tr>
				</tbody>
			</table>
		</div>		
	</body>
</html>