html table的基本使用

tr : 表格的行
th : 表格的表头
td : 表格的列

表格合并列使用的是:colspan=”n”;
表格合并行使用的是:rowspan=”n”;
其中,n为合并的列或行数量

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
</head>

<body>
<table border="1">
<tr><th colspan="4" style="background-color:#F09">光良——>光芒
<tr style="background-color:#F6F"><th>编号<th>歌曲名称<th>在线播放<th>点击计数
<tr style="background-color:#F6F"><td>1<td>私人空间<td><a href="">播放</a><td>689
<tr style="background-color:#F6F"><td>2<td>光<td><a href="">播放</a><td>689
<tr style="background-color:#F6F"><td>3<td>hey<td><a href="">播放</a><td>612
<tr style="background-color:#F6F"><td>4<td>心甘情愿<td><a href="">播放</a><td>712
</table>
</body>
</html>

效果:

实现点击播放后计数:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验二</title>
</head>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
</head>

<body>
<script>
    function run(nums)
    {
        var s="";
        s="t"+nums;
        var ss=document.getElementById(s);
        ss.value++;
    }
</script>
<table border="1">
<tr><th colspan="4" style="background-color:#F09">光良——>光芒
<tr style="background-color:#F6F"><th>编号<th>歌曲名称<th>在线播放<th>点击计数
<tr style="background-color:#F6F"><td>1<td>私人空间<td><a href="#" onClick="run(1)">播放</a><td>
<input type="text" id="t1" style="width:1.5cm; background-color:#F6F; text-align:center" value="123">
<tr style="background-color:#F6F"><td>2<td>光<td><a href="#" onClick="run(2)">播放</a><td>
<input type="text" id="t2" style="width:1.5cm; background-color:#F6F; text-align:center" value="689">
<tr style="background-color:#F6F"><td>3<td>hey<td><a href="#" onClick="run(3)">播放</a><td>
<input type="text" id="t3" style="width:1.5cm; background-color:#F6F; text-align:center" value="612">
<tr style="background-color:#F6F"><td>4<td>心甘情愿<td><a href="#" onClick="run(4)">播放</a><td>
<input type="text" id="t4" style="width:1.5cm; background-color:#F6F; text-align:center" value="712">
</table>
</body>
</html>

<body>
</body>
</html>
0

Leave a Reply

Your email address will not be published.