在W3cschool学习了一下CSS关于表格的知识,现在分享一下小白表格制作过程。
按照教程源码我先做了一下
界面是这样的:
原教程以 #customer进行了CSS编写
它设计了
#customer{ }
#customer th{ }
#customer td{ }
#customer tr.alt { }
一开始不太理解tr.alt是做啥的,后来知道这是tr的一个名为alt的类,和tr本身相比,内容的背景颜色和字体颜色不同,正如表格图片展示的那样
HTML里相匹配的是<table id="customer">
然后我用.customer进行了CSS编写
.customer{ }
th{ }
td{ }
tr.alt{ }
HTML里相匹配的是<table class="customer">
二者效果完全相同
对了,CSS中#customer th,td{ }的border(边框属性)颜色前记得加solid,不然不显示
border: solid cornflowerblue 1px;
下面上代码:
1)用 #customer编写的
CSS:
h1{
text-align: center;
font-size: 3em;
}
#customer{
width: 80%;
border-collapse: collapse;
margin: auto;
margin-top: 50px;
}
#customer th,td{
border: solid cornflowerblue 1px;
padding: 8px;
text-align: center;
}
#customer th{
font-size: 2em;
padding-top: 10px;
padding-bottom: 2px;
background-color: burlywood;
color: white;
}
#customer tr.alt {
color: brown;
background-color: beige;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS表格pro</title>
<link rel="stylesheet" href="../CSS/0106_02.css">
</head>
<body>
<h1>这是一个表格</h1>
<!--#customer与id搭配
如果是.customer与class搭配-->
<table id="customer">
<tr>
<th>company</th>
<th>contact</th>
<th>country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</body>
</html>
2)用.customer 编写的
CSS:
h1{
text-align: center;
font-size: 3em;
}
.customer{
width: 80%;
border-collapse: collapse;
margin: auto;
margin-top: 50px;
}
th,td{
border: solid cornflowerblue 1px;
padding: 8px;
text-align: center;
}
th{
font-size: 2em;
padding-top: 10px;
padding-bottom: 2px;
background-color: burlywood;
color: white;
}
tr.alt{
color: brown;
background-color: beige;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS表格pro2.0</title>
<link rel="stylesheet" href="../CSS/0106_03.css">
</head>
<body>
<h1>这是一个表格</h1>
<table class="customer">
<tr>
<th>company</th>
<th>contact</th>
<th>country</th>
</tr>
<tr>
<!-- 每另起一行需要加一个tr标签包起来-->
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
</table>
</body>
</html>