css+html 嵌套表格做简单网页_html+css 表格网站

作者：笔触狂放9 | 2024-02-13 13:42:41
踩
html+css 表格网站
效果：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table class="main" border="1px" align="center">
        <tr>
            <td class="c1">
                <a href="">设为首页|</a><a href="">收藏此页</a>
            </td>
        </tr>
        <tr>
            <td class="c2">
                <table>
                    <tr>
                        <td width="200"><a href="" style="width: 100%; height: 40px; display:block; background-color: red;text-align: center; line-height: 40px;">首页</a></td>
                        <td width="160">关于我们</td>
                        <td width="160">关于我们</td>
                        <td width="160">关于我们</td>
                        <td width="160">关于我们</td>
                        <td width="160">关于我们</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="c3"></td>
        </tr>
        <tr>
            <td class="c4">
                <table>
                    <tr>
                        <td class="c4_1">
                            <table>
                                <tr>
                                    <td>关于我们</td>
                                </tr>
                                <tr>
                                    <td>关于我们</td>
                                </tr>
                                <tr>
                                    <td>关于我们</td>
                                </tr>
                                <tr>
                                    <td>关于我们</td>
                                </tr>
                                <tr>
                                    <td>关于我们</td>
                                </tr>
                            </table>
                        </td>
                        <td class="c4_2">
                            <table>
                                <tr>
                                    <td class="c4_2_1">
                                        <table>
                                            <tr>
                                                <td style="border-bottom: 1px dotted ">您现在的位置：首页>关于我们>公司简历</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img style="margin:10px" align="left" src="qiyejianjie_small.jpg" /> 医疗器械公司（前名为医疗器械厂），是一家专业研制、生产各类医用诊断X射线机和各种手术床的大中型国有法人独资企业。在国内医疗器械放射影像行业中具有很高的地位和影响。 本企业始建于1946年，具有60余年悠久历史，是国内大型医疗设备研发生产基地。历年来，公司先后研发生产的各类医院设备涉及医疗器械各个领域。目前，公司主导产品——医用诊断X射线机的生产，属国内最早，产品范围覆盖5mA—800mA大、中、小型系列产品，每年各类X射线机
                                        产量达2500台（套）。 近年来，本企业抓住发展机遇，挖掘、发挥企业优势，加强企业内部各种要素的整合，优化资源配置，通过产、学、研的合作，通过和国外厂商经、技、贸的合作，使企业市场竞争能力不断增强。 目前，公司在全国30多个省市自治区设有营销、服务网点及代理机构70多个，覆盖全国及世界各个国家和地区，产品远销欧美、中东、东南亚等国家地区。同时，公司为国内外客户及部队用户提供开发、生产服务，为用户提供多种通用医疗配件和专用设备及满意的售后服务。
                                        公司以专业的队伍、严谨的管理、卓越的设备、优质的服务，着力打造放射医疗设备界的品牌产品。 在60多年的生产经营中，公司于1993年荣获高新技术企业的荣誉，并一直保持至今，荣获了首批科技小巨人企业，诚信企业，A类财务会计信用单位等荣誉。自1998年6月始，公司先后通过了ISO9001、ISO13485、CCC、 SFDA、CE等系列国际质量体系认证和产品认证，多项产品列入中国医疗装备协会推荐产品，《医用诊断X射线》机被推荐为上海名牌产品，本品牌被推荐为装备制造业与高新技术产业自主创新品牌，享有极高的声誉和良好的品牌效应。
                                        医疗器械公司坚持用企业文化提升企业核心竞争力，使企业在发展中树立起良好的社会形象。“行远必自迩、追求无止境”。公司将一如既往的励精图治，开拓创新，为医疗卫生事业，做出我们永远的承诺。
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="c5">关于我们</td>
        </tr>
    </table>
</body>

</html>
<style>
    .main {
        width: 1000;
        height: auto;
    }
    
    .c1 {
        width: 100%;
        height: 40px;
        text-align: right;
        vertical-align: top;
        background-image: url(logo.png);
        background-repeat: no-repeat;
    }
    
    .c2 {
        height: 40px;
        text-align: center;
    }
    
    .c2 td {
        border: 1px solid gray;
        height: 40px;
        background-image: url(bg_blue.jpg);
        color: white;
    }
    
    .c3 {
        width: 100%;
        height: 320px;
        background-image: url(yiliao_big.jpg);
    }
    
    .c4_1 {
        width: 200px;
        height: 100%;
        background-color: #ccc;
        text-align: left;
        vertical-align: top;
    }
    
    .c4_2 {
        width: 800px;
        height: 100%;
    }
    
    .c4_2_1 td {
        width: 800px;
        text-align: left;
        vertical-align: top;
        /* border-bottom: 1px dotted ; */
    }
    
    .c5 {
        text-align: center;
        vertical-align: middle;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/80146