H5学习之20 CSS-table

最新推荐文章于 2023-12-17 15:55:24 发布
原创 最新推荐文章于 2023-12-17 15:55:24 发布 · 475 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css #padding

本文通过三个实例详细介绍了如何使用CSS对HTML表格进行美化，包括边框样式、单元格间距、空单元格处理、背景颜色设置等技巧。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <table id="table1">
        <caption>表格标题</caption>
        <tr>
        <th>标题1</th> <th>标题2</th> <th>标题3</th>
        </tr>

        <tr>
            <td>1</td> <td>2</td> <td>3</td>
        </tr>

        <tr>
            <td>4</td><td> </td><td> </td>
        </tr>

    </table>
    <hr/>
<!-------------------------------------------------------------------------------------------------------------------->

    <table id="table2">
        <tr>
            <th>标题1</th> <th>标题2</th> <th>标题3</th>
        </tr>

        <tr>
            <td>11111</td> <td>22222</td> <td>33333</td>
        </tr>

        <tr>
            <td>444444</td><td>555555</td><td>666666</td>
        </tr>

    </table>

<hr/>
<!-------------------------------------------------------------------------------------------------------------------->

<table id="table3">
    <caption>漂亮的表格</caption>
    <tr>
        <th>漂亮</th> <th>漂亮</th> <th>漂亮</th>
    </tr>

    <tr class="alt">
        <td>美丽</td> <td>美丽</td> <td>美丽</td>
    </tr>

    <tr>
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>

    <tr class="alt">
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>

    <tr>
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>

    <tr class="alt">
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>
</table>

</body>
</html>
#table1 ,#table1 th,#table1 td{
    border: 1px solid blue;

    border-spacing: 50px;

    empty-cells: hide;

    caption-side: bottom;
}

/*
三个标签 都有边框
一个table设置了id ，直接#id 就代表了那个table
border spacing 设置分隔单元格边框的距离。如果设置了 collapse:collapse 就失效
empty cells 设置空单元格是否显示，我记得有一个属性可以让 没有内容的单元格也可以显示出边框，需要的话再查
caption side 代表标题位置
*/
/*---------------------------------------------------------------------------------------------------------------------*/
#table2 ,#table2 th,#table2 td{

    border: 1px solid blue;
    border-collapse: collapse;
}
/*边框出现好几层的时候，border-collapse：collapse 可以让边框变成单层*/

#table2{
    width:100%;
   /* height:100%;*/

    text-align: right;

    color: green;
    background-color: darkgrey;


}
/*
直接 设置 table的宽度为100%，可以让表格宽度填满屏幕，设置高度百分比不管用,高度具体数值可以更改
text align 设置水平对齐方式，th默认是居中，设置成right就到右边了。
color直接更改文字颜色
background-color 更改背景颜色
*/

#table2 th{
     height:100px ;
    /* widht:100px;*/

    vertical-align: top;

    color: blue;


}
/*
设置th的高度可以更改高度,在这里更改宽度不管用
vertical-align 设置垂直对其方式，th默认居中，设置成top就到了上头。
*/

#table2 td{
    height:25px;
    padding:10px;
}
/*
padding 更改内边距的值，
控制表格中内容与边框的距离
*/
/*---------------------------------------------------------------------------------------------------------------------*/



#table3,#table3 th,#table3 td{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
    caption-side: bottom;
    border: green solid 1px;
    border-collapse: collapse;
}
#table3{
 width:100%;
}

#table3 th{
    background-color: darkgreen;
    color: white;
    font-size: 1.2em;
    text-align: left;
    padding: 5px 0px 5px 4px;
}
/*内边距padding值， 4个值分别为上右下左，只设置1个值就是4个值全是，如果2 3 4 个 就按 上右下左的顺序*/

#table3 td{
    font-size: 0.9em;
    padding: 4px;
}

#table3 tr.alt {
    color: blue;
    background-color: #EAF2D3;
}
/*给tr设置了一下类，然后设置了一下背景颜色*/
具体效果如下：


代码解释如下：

一共三个表格，


第一个表格

<table id="table1">
    <caption>表格标题</caption>
    <tr>
    <th>标题1</th> <th>标题2</th> <th>标题3</th>
    </tr>

    <tr>
        <td>1</td> <td>2</td> <td>3</td>
    </tr>

    <tr>
        <td>4</td><td> </td><td> </td>
    </tr>

</table>
#table1 ,#table1 th,#table1 td{
    border: 1px solid blue;

    border-spacing: 50px;

    empty-cells: hide;

    caption-side: bottom;
}

/*
三个标签 都有边框
一个table设置了id ，直接#id 就代表了那个table
border spacing 设置分隔单元格边框的距离。如果设置了 collapse:collapse 就失效
empty cells 设置空单元格是否显示，我记得有一个属性可以让 没有内容的单元格也可以显示出边框，需要的话再查
caption side 代表标题位置
*/
三个标签都有边框，指的是 table th td 都设置了border.

稍微注意一下选择的时候的格式


第二个表格

  <table id="table2">
    <tr>
        <th>标题1</th> <th>标题2</th> <th>标题3</th>
    </tr>

    <tr>
        <td>11111</td> <td>22222</td> <td>33333</td>
    </tr>

    <tr>
        <td>444444</td><td>555555</td><td>666666</td>
    </tr>

</table>

#table2 ,#table2 th,#table2 td{

    border: 1px solid blue;
    border-collapse: collapse;
}
/*边框出现好几层的时候，border-collapse：collapse 可以让边框变成单层*/

#table2{
    width:100%;
   /* height:100%;*/

    text-align: right;

    color: green;
    background-color: darkgrey;


}
/*
直接 设置 table的宽度为100%，可以让表格宽度填满屏幕，设置高度百分比不管用,高度具体数值可以更改
text align 设置水平对齐方式，th默认是居中，设置成right就到右边了。
color直接更改文字颜色
background-color 更改背景颜色
*/

#table2 th{
     height:100px ;
    /* widht:100px;*/

    vertical-align: top;

    color: blue;


}
/*
设置th的高度可以更改高度,在这里更改宽度不管用
vertical-align 设置垂直对其方式，th默认居中，设置成top就到了上头。
*/

#table2 td{
    height:25px;
    padding:10px;
}
/*
padding 更改内边距的值，
控制表格中内容与边框的距离
*/


第三个表格

<table id="table3">
    <caption>漂亮的表格</caption>
    <tr>
        <th>漂亮</th> <th>漂亮</th> <th>漂亮</th>
    </tr>

    <tr class="alt">
        <td>美丽</td> <td>美丽</td> <td>美丽</td>
    </tr>

    <tr>
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>

    <tr class="alt">
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>

    <tr>
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>

    <tr class="alt">
        <td>动人</td> <td>动人</td> <td>动人</td>
    </tr>
</table>
#table3,#table3 th,#table3 td{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
    caption-side: bottom;
    border: green solid 1px;
    border-collapse: collapse;
}
#table3{
 width:100%;
}

#table3 th{
    background-color: darkgreen;
    color: white;
    font-size: 1.2em;
    text-align: left;
    padding: 5px 0px 5px 4px;
}
/*内边距padding值， 4个值分别为上右下左，只设置1个值就是4个值全是，

#table3 td{
    font-size: 0.9em;
    padding: 4px;
}

#table3 tr.alt {
    color: blue;
    background-color: #EAF2D3;
}
/*给tr设置了一下类，然后设置了一下背景颜色*/
复杂的表格就是设置的样式多一点，颜色搭配好一点。





el-table导出为excel表格----vue2.0
Seven_Ting的博客
07-29 436
【代码】el-table导出为excel表格----vue。
h5 Table表格
qq_38932407的博客
04-15 5426
table:表格 tr:行rowspan：占据行数 td列 clospan：占据列数 th表头（浏览器默认样式粗体居中） caption标题（浏览器默认样式居中）
H5表单美化
10-26
h5+css3做的表单美化，方便修改，快来试试吧！！！！！！！！！
html5 table样式css,css表格样式的布局篇
weixin_36433730的博客
06-16 1252
进修了div css构造后，确凿css对表格样式的设置就变得简单了。一样平常对table配置class或id来对其设置装备摆设CSS花色。表格CSS花式配置实例代码：表格CSS设置装备摆设实例 CSS5.tablecss{text-align:center; border:1px solid #CCC;border-bottom:0;border-left:0}.tablecss th{color...
HTML5中 HTML格式化／HTML样式／链表／表格－样式 韩俊强的博客
weixin_33796177的博客
08-30 247
HTML5学习从简单到复杂，循环渐进！ 每日更新关注:http://weibo.com/hanjunqiang 新浪微博！ 1.HTML格式化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
H5+CSS3+JS逆向前置——HTML2、table表格标签
红目香薰
12-17 1401
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5-表格的基本样式
chenzhaoxiong123的博客
11-01 1万+
1.选择器 类选择器：通过给标签元素起一个classname类名 的方式，在编写样式的时候，用类名来获取该元素 .div1{ width:200px; height:200px; background-color:blue; } id选择器： 给元素起一个id名，用来获取该元素，设置样式的时候使用一个元素即可以同时有id名和类名 #div2{
rsuite-table:一个 React 表格​​组件
07-24
套件表 一个 React 表格​​组件。 特征 支持虚拟化。 支持固定标题，固定列... // or 'rsuite-table/dist/css/rsuite-table.css' const dataList = [ { id : 1 , name : 'a' , email : 'a@email.com' , avartar : '.
h5 table自动滚动的方法css
10-11
h5 table自动滚动的方法css
CSS属性display:inline-block用法深入理解
09-25
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的显示方式。`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，...
html css构建5 5表格,【Web前端HTML5&CSS3】15-表格
weixin_36255718的博客
06-30 517
文章目录表格1、表格在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表、人名单、成绩单…同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspan 纵向的合并单元格colspan 横向的合并单元格A1B1C1D1A2B2C2D2ABB3C3A4B4C...
HTML常用table样式
08-06
源代码包 博文链接：https://atgoingguoat.iteye.com/blog/2074431
表格样式css制作html5,利用css实现的表格样式展示
weixin_39974400的博客
06-28 931
本文为大家展示了几款美观的表格样式，希望大家可以喜欢。1、单像素边框CSS表格table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}table.grid...
h5-----表格1
学习是我快乐， 吗
07-13 908
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!--  表格在日常生活中使用的非常的多，比如excel就是专门用来创建
【web前端基础 | H5】HTML标签（下）表格，列表，表单
小赵不忙的博客
10-14 1343
思维导图 一：表格标签 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 组成 <table> <tr> <caption>表格标题</caption> </tr> <tr> <th&
前端h5+css
cugbtang
05-15 412
头部区域的元素标签: <title>, <style>, <meta>, <link>, <script> <base> 定义页面中所有链接默认的链接目标地址 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。 <link> 标签通常用于链接到样式表 <style> 定义...
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 9万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
h5页面编写原生table表格，并调整表格样式？
SM_Cute的博客
07-06 2268
h5页面编写原生table表格，并调整表格样式？
web前端html5+css3学习笔记(5)——表格、表单
m0_52353966的博客
03-19 578
本篇学习表格和表单。本片学习了表格与表单，尤其是表单内标签多，属性多，不要记混了。
H5 v-html渲染table过大
最新发布
03-29
### 解决方案 当使用 `v-html` 渘染表格时，如果遇到表格过大或者样式错乱的问题，可以尝试以下几种方法来优化： #### 方法一：调整 CSS 样式 通过自定义 CSS 来控制表格的宽度和高度。可以通过设置固定列宽、滚动条等方式改善用户体验。 ```css .table-container { overflow-x: auto; /* 添加水平滚动条 */ } table { width: 100%; /* 设置表格宽度为容器的100% */ border-collapse: collapse; white-space: nowrap; /* 防止文字自动换行 */ } ``` 上述代码片段可以帮助解决表格内容超出页面范围的情况[^1]。 --- #### 方法二：动态计算表格尺寸 对于大型数据集，可以考虑分页加载或虚拟列表技术减少 DOM 节点数量。例如，`vue3-table-lite` 和 `vue3-easy-data-table` 提供了内置的分页功能，能够有效降低性能开销并提升渲染效率[^2]。 以下是基于 `vue3-table-lite` 的简单实现示例： ```javascript <template> <div class="table-container"> <vue3-table-lite :columns="columns" :rows="rows" :total-row-count="totalCount" @do-search="onSearch" /> </div> </template> <script> import Vue3TableLite from 'vue3-table-lite'; export default { components: { Vue3TableLite }, data() { return { columns: [ { label: "ID", field: "id" }, { label: "Name", field: "name" } ], rows: [], totalCount: 0, }; }, methods: { onSearch({ page, pageSize }) { this.rows = fetchData(page, pageSize); // 替换为实际的数据获取逻辑 this.totalCount = getTotal(); // 获取总记录数 } } }; </script> ``` 此方式不仅解决了表格过大的问题，还提升了用户的交互体验。 --- #### 方法三：深拷贝处理复杂结构 如果表格中的数据较为复杂（嵌套对象），可能需要对其进行深拷贝操作以避免引用污染。例如，在复制表单时未正确执行深拷贝可能导致多个实例共享同一份底层数据[^3]。 推荐使用 Lodash 库完成深拷贝任务： ```javascript const _ = require('lodash'); let originalData = [{ id: 1, name: "Item 1" }]; let copiedData = _.cloneDeep(originalData); // 修改副本不会影响原始数据 copiedData[0].name = "Modified Item"; console.log(originalData); // 输出不变 ``` 以上代码展示了如何安全地创建独立的数据副本。 --- ### 总结 针对 H5 中 `v-html` 渲染 table 过大的问题，建议优先采用 CSS 控制布局的方式解决问题；其次可引入第三方组件库如 `vue3-table-lite` 或者 `vue3-easy-data-table` 实现更高效的分页展示；最后注意在涉及复杂数据结构的情况下实施必要的深拷贝措施防止意外行为发生。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值