html 制作复杂的table

女爷i 2022-05-14 10:58 273阅读 0赞

数据分析，一般都需要显示数据，就需要使用html做复杂的表格。复杂表格一般是对td的rowspan 、colspan属性值。

在html中<td> 标签定义 HTML 表格中的标准单元格。

(1)rowspan 属性规定单元格可横跨的行数;

(2)colspan 属性规定单元格可横跨的列数。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>复杂表格</title>
    </head>
    <body>
        <center>
            <table width = "20%" border="1">
                <tr>
                    <th>网站</th>
                    <th colspan="2">统计情况</th>    
                </tr>
                <tr>
                    <td rowspan="3">奇虎360</td>    
                    <td>http://hao.360.cn/</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>http://sh.qihoo.com/</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>http://video.so.com/</td>
                    <td>33</td>
                </tr>
            </table>                                                                                                                                                                                                           
        </center>
    </body>
    </html>

显示：

![021108452508296.png][]

**rowspan 、colspan 可以理解为占位。占行数、列数。**

[021108452508296.png]: /images/20220514/6670c0c78c754902af419608d4da17a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML制作五子棋

上代码 -------------------- <html> <head> <meta name="viewport" content="width=device

我不是女神ヾ/ 2024年03月02日 08:02/ 0 赞/ 49 阅读

相关 element-ui复杂table 表格实现

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

àì夳堔傛蜴生んèń/ 2022年12月19日 09:25/ 0 赞/ 313 阅读

相关 HTML05.Table

<html> <head> <meta charset="utf-8"> <title>TABLE表格的

约定不等于承诺〃/ 2022年06月01日 10:19/ 0 赞/ 152 阅读

相关 html —— table 标签与 display:table 样式

目录：一、table 相关标签介绍及使用二、div 布局设置display：table 一、table 相关标签介绍及使用相关标签按包含关

红太狼/ 2022年05月28日 07:26/ 0 赞/ 393 阅读

相关 HTML表格table

什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用div+css实现页面布局。如何创建HTML表格：H

淡淡的烟草味﹌/ 2022年05月15日 00:30/ 0 赞/ 409 阅读

相关 html 制作复杂的table

数据分析，一般都需要显示数据，就需要使用html做复杂的表格。复杂表格一般是对td的rowspan 、colspan属性值。在html中<td> 标签定义 HTML 表格中

女爷i/ 2022年05月14日 10:58/ 0 赞/ 274 阅读

相关 html用table标签制作表格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JveHpo

雨点打透心脏的1/2处/ 2022年04月13日 11:10/ 0 赞/ 452 阅读

相关 Css制作table细线表格

table \{ border-collapse:collapse; /\ 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) \/ bo

骑猪看日落/ 2021年12月13日 16:49/ 0 赞/ 391 阅读

相关 HTML表格制作的例子

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

左手的ㄟ右手/ 2021年12月10日 22:11/ 0 赞/ 314 阅读

相关 HTML进度条的制作

HTML进度条的制作 1、HTML代码经验值： <span class="progress-bar"><b style="width:50px;"> </

旧城等待，/ 2021年07月24日 19:39/ 0 赞/ 602 阅读