master

分支 (1)

管理

管理

master

hello-html-five
/
table.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style type="text/css">
        body {margin: 0; background-color: rgb(185,15,90);}
        #main {text-align: center; padding:	100px 0; color:white;}
        table {margin: 0 auto;}
        thead {font-size: 40px; font-family: "微软雅黑", sans-serif;}
        tfoot {color: #CCC; font-size: 12px; background-color: black;}
        thead td {height:60px;}
        tfoot td {height:40px;}
        tbody td {width:200px; height:50px; background-color: yellow; color: black;}
    </style>
    <script>
        window.onload = function() {
        	var content = document.getElementById('content');
        	var items = content.getElementsByTagName('td');
        	for(i=0;i<items.length;i++){
        		if(i%2!=0)
        			items[i].style.backgroundColor = '#DDD';
        	}
        };
    </script>
</head>

<body>
<div id="main">
<table id="sheet">
	<thead>
	<tr>
		<td colspan="4">快乐体检表</td>
	</tr>
	</thead>

	<tfoot>
	<tr>
		<td colspan="4">天堂医院开膛体检部 2013-10-22</td>
	</tr>
	</tfoot>

	<tbody id="content">
	<tr>
		<td>身高</td>
		<td>173cm</td>
		<td>体重</td>
		<td>55kg</td>
	</tr>
	<tr>
		<td>视力</td>
		<td>4.4</td>
		<td>色觉</td>
		<td>超常级</td>
	</tr>
	<tr>
		<td>攻击力</td>
		<td>170000</td>
		<td>防御力</td>
		<td>280000</td>
	</tr>
	</tbody>
</table>
</div>
</body>
</html>