html5 创建表格

来源:互联网 发布:网游网络加速器哪个好 编辑:程序博客网 时间:2024/05/01 09:38

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Eden的H5作业</title>
<style>
.datalist{
font-family: arial;/*设置字体*/
border-collapse: collapse;/*合并边框*/
background-color: #ffffff;/*背景颜色*/
font-size: 25px;/*表格大小*/
}

.datalist th{
border: 1px solid #9cbe21;/*边线粗细,边线颜色*/
font-weight: normal;/*字体正常显示*/
padding-top: 4px; padding-bottom: 4px;/*上下距离*/
padding-left: 12px; padding-right: 90px;/*左右距离*/
text-align: left;/*字体靠左*/
}

.line1{
background-color: #a7c941;
font-size: 25px;
color: #ffffff;
}

.line2{
background-color: #ffffff;
font-size: 20px;
}

.line3{
background-color: #e9f2d3;
font-size: 20px;
}

.line4{
background-color: #ffffff;
font-size: 20px;
}

.line5{
background-color: #e9f2d3;
font-size: 20px;
}

.line6{
background-color: #ffffff;
font-size: 20px;
}

.line7{
background-color: #e9f2d3;
font-size: 20px;
}
</style>
</head>

<body>
<table class="datalist">
<tr class="line1">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr class="line2">
<th>Apple</th>
<th>Steven Jobs</th>
<th>USA</th>
</tr>

<tr class="line3">
<th>Baidu</th>
<th>Li YanHong</th>
<th>China</th>
</tr>

<tr class="line4">
<th>Google</th>
<th>Larry Page</th>
<th>USA</th>
</tr>

<tr class="line5">
<th>Lenovo</th>
<th>Liu ChuanZhi</th>
<th>China</th>
</tr>

<tr class="line6">
<th>Microsoft</th>
<th>Bill Gates</th>
<th>USA</th>
</tr>

<tr class="line7">
<th>Nokia</th>
<th>Stephen Elop</th>
<th>Finland</th>
</tr>
</table>
</body>
</html>
111

0 0
原创粉丝点击