用HTML做一个表格(table标签)

用HTML做一个表格(table标签),第1张

table标签定义 HTML 表格,table 由一个或多个 tr、th 或 td 元素组成,tr 元素定义表格的行,th定义表头,td定义表格单元,即展示的内容,下面介绍下如何用HTML做一个表格

01

新建一个HTML文件,命名为testTable.html

02

增加table标签,数据展示以省份和省会为例,代码如下

03

在代码的空白出右键,选择浏览器打开,选择默认即可

04

自动跳转到浏览器,效果如下图

05

下面我们为表格增加样式,增加边框等元素,代码如下

06

刷新浏览器,最终效果如下

如下代码可以实现table和div两种方法,希望可以帮到你:

<table border="1" cellspacing="0" style="width:520pxborder:1px solid #000border-collapse:collapse">

<tr style="height:30px"><td rowspan="2"></td><td></td><td></td><td rowspan="4"></td></tr>

<tr style="height:30px"><td rowspan="2" colspan="2"></td></tr>

<tr style="height:30px"><td rowspan="2"></tr>

<tr style="height:30px"><td></td><td></td></tr>

</table>

<div style="margin-top:30px">

<div style="width:130pxfloat:left">

<div style="height:60pxborder:1px solid #000"></div>

<div style="height:59pxborder:1px solid #000border-top:0px"></div>

</div>

<div style="width:260pxfloat:left">

<div>

<div style="width:129pxfloat:leftheight:30pxborder-top:1px solid #000border-right:1px solid #000"></div>

<div style="width:129pxfloat:leftheight:30pxborder-top:1px solid #000border-right:1px solid #000"></div>

</div>

<div style="width:259pxfloat:leftheight:58pxborder-top:1px solid #000border-right:1px solid #000"></div>

<div>

<div style="width:129pxfloat:leftheight:30pxborder:1px solid #000border-left:0px"></div>

<div style="width:129pxfloat:leftheight:30pxborder:1px solid #000border-left:0px"></div>

</div>

</div>

<div style="width:130pxfloat:leftheight:120pxborder:1px solid #000border-left:0px"></div>

</div>

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

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

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

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

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

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

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

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


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

原文地址: http://outofmemory.cn/zaji/7238257.html

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

发表评论

登录后才能评论

评论列表(0条)

保存