HTML/CSS: 用CSS与HTML实现表格的显示

最新推荐文章于 2025-05-24 09:15:00 发布

小威威__

最新推荐文章于 2025-05-24 09:15:00 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML-CSS 文章标签： html css css表格分栏相对位置

本文链接：https://blog.youkuaiyun.com/linwh8/article/details/52588562

HTML-CSS 专栏收录该内容

14 篇文章

订阅专栏

本文主要介绍了在网页制作中实现分栏的三种方法：float、position-absolute和表格法，并详细讲解了如何用CSS和HTML创建表格，强调了CSS表格的语义性和与HTML表格的区别。内容包括表格布局、单元格处理以及CSS表格的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在制作网页页面时，经常需要对页面进行分栏。据我现有的知识，目前有三种方法可以实现：
(1)float大法；
(2)position-absolute大法；
(3)表格大法。

今天重点讲述的是表格大法。对于前面两种，就简单说明一下：
(1)float大法便是将边栏设置为浮动，然后设置主内容的margin-left 或者是 margin-right 等于边栏的总宽度(外边距+内边距＋内容宽度)。如果出现浮动元素超出了某个逻辑块的边界，可以使用overflow:hidden解决。如果出现浮动元素覆盖到另外的逻辑块，可以使用clear:left 或者是 clear:right 解决。
(2)position-absolute大法便是将边栏固定在页面的某一个位置(你的目标位置)，然后与float大法一样设置外边距即可。

接下来是表格大法。在此之前我们先了解一下怎么用CSS与HTML实现表格的显示。下面是建立一个2*2的表格：

// HTML
<div id="tableContainer">
    <div class="tablerow">
        <div class="tableCell">
             <p>Haha</p>
        </div>
        <div class="tableCell">
             <p>Haha</p>
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <p>Haha</p>
        </div>
        <div class="tableCell">
            <p>Haha</p>
        </div>
    </div>
</div>

// CSS
div#tableContainer{
    display: table;
}
div#tableRow{
    display: table-row;
}
div#tableCell{
    display: table-cell;
}

如此便能构成一个2*2的表格。对于分栏，其实就是一种特殊的情况，可以创建一个1*2的表格，然后将内容插入单元格。

注意：
1.该表格的单元格只能插入块状元素。如要插入內联元素，应在外面嵌套上块元素然后再插入；
2.border-spacing可以设置内容与边界的距离。同时，该距离也存在于边框外，但不能与其他元素的外边距重叠。

CSS表格显示与HTML表格有什么区别？
这个涉及到语义性。CSS表格与HTML表格不同，它显示只是使用一种类似表格的布局来表现这个结构中的内容。HTML表格面向的是表格数据，也就是应当有表格结构的数据。所以，使用CSS表格显示只是创建某种表现布局的一种方法，而HTML表格则是建立数据的结构。

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！