Html5+Css3实现简单表格排版

最新推荐文章于 2025-05-24 09:15:00 发布

原创最新推荐文章于 2025-05-24 09:15:00 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

本文通过HTML5和CSS3技术详细讲解如何实现一个美观的表格排版，首先利用HTML5进行初步布局，然后结合CSS3的样式增强视觉效果。

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

1.html5实现初步布局

<!DOCTYPE HTML>
<html>
<head>
<title>CS 142 Project 1, Problem 1</title>
<!--<link rel="stylesheet" type="text/css" href="myStyle1.css">-->
<!--<link rel="stylesheet" type="text/css" href="myStyle2.css">-->
</head>
<body>
<table >
<tr>
	<th class="left">Item</th>
	<th class="left">Manufacturer</th>
	<th class="left">Size</th>
	<th>Unit Price</th>
	<th>Quantity</th>
	<th>Total Price</th>
</tr>
<tr class="alt">
	<td class="left">Corn Flakes</td>
	<td class="left">Kellogg's</td>
	<td class="left">18 oz.</td>
	<td>2.50</td>
	<td>1</td>
	<td>2.50</td>
</tr>
<tr>
	<td class="left">Solid White Tuna</td>
	<td class="left">Starkist</td>
	<td class="left">5oz</td>
	<td>2.79</td>
	<td>2</td>
	<td>5.58</td>
</tr>
<tr class="alt">
	<td class="left">Cream op Mushroom soup</td>
	<td class="left">Campbell's</td>
	<td class="left">10.75 oz</td>
	<td>1.00</td>
	<td>2</td>
	<td>2.00</td>
</tr>
<tr>
	<td class="left">2% Lowfat Milk</td>
	<td class="left">safeway</td>
	<td class="left">0.5 gal</td>
	<td>1.99</td>
	<td>1</td>
	<td>1.99</td>
</tr>
<tr class="alt">
	<td class="left">Extra-Wide Egg Noodles</td>
	<td class="left">Golden Grain</td>
	<td class="left">12 oz</td>
	<td>0.87</td>
	<td>3</td>
	<td>2.61</td>
</tr>
<tr id="total">
	<td class="left">Total</td>
	<td></td>
	<td></td>
	<td></td>
	<td>9</td>
	<td>14.68</td>
</tr>
</table>
</body>
</html>

2.引用myStyle1.css得出样式1

table tr th td
{
border:1px solid black;
}
th.left
{
text-align:left;
}
td.left
{
text-align:left;
}

table
{
border-collapse:collapse;
width:70%;
}
tr
{
background-color:#eeeff2;
text-align:center;
font-family:Tahoma;
font-size:13px;
}
tr.alt
{
background-color:#dfe1e7;
}

th
{
background-color:#687291;
text-align:center;
color:white;
}

#total
{
font-weight:bold;
display:none;
}

3.引用myStyle2.css得出样式2

th.left
{
text-align:left;
}
td.left
{
text-align:left;
}

table
{
border-style:solid;border-width:10px 10px 10px 10px;
width:70%;
border-color:#d0d0ff;
padding:1cm;
}
tr
{
text-align:center;
font-family:Tahoma;
font-size:13px;
}

th
{
text-align:center;
}

#total
{
font-weight:bold;
}