用HTML的<table>标签,怎么写出一个三行两列的表格?

用HTML的<table>标签,怎么写出一个三行两列的表格?,第1张

以下为示例代码,根据个人的需求调节以下表格的尺寸等设置即可, *** 作步骤如下:

1.首先打开Dw软件,新建一个html,如下图红框所示

2.鼠标左键全选<head>和</head>中间的内容,如下图红框所示;

3.快捷键”Delete“删除选中目标,如下图红框所示;

4.然后输入代码,设置表格属性,如下图红框所示;

5.输入完毕,将光标至于<body>和</body>中间那一行,如下图红框所示;

6.输入代码设置表格的行和列,如下图红框所示;

7.打完代码就可以对此html进行保存预览了,点击“是”按钮,如下图红框所示。

如下代码可以实现,基本功能在这,你只用稍微修改一下就可以了:

<script>

function Cmd(v){

for(var i = 1 i <= 3 i++){

if(i == v)

document.getElementById("table" + i).style.display = ""

else

document.getElementById("table" + i).style.display = "none"

}

}

</script>

<input type="button" value="表格1" onclick="Cmd(1)" />

<input type="button" value="表格2" onclick="Cmd(2)" />

<input type="button" value="表格3" onclick="Cmd(3)" />

<div>

<table id="table1">

<tr><td>这是表格1</td></tr>

</table>

<table id="table2" style="display:none">

<tr><td>这是表格2</td></tr>

<tr><td>这是表格2</td></tr>

</table>

<table id="table3" style="display:none">

<tr><td>这是表格3</td></tr>

<tr><td>这是表格3</td></tr>

<tr><td>这是表格3</td></tr>

</table>

</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5900790.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-07
下一篇 2023-03-07

发表评论

登录后才能评论

评论列表(0条)

保存