前端之HTML表格s

已于 2022-03-10 13:54:50 修改
阅读量2k 收藏 6
点赞数
分类专栏： 前端基础 文章标签： 前端 html
于 2022-03-09 20:33:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46372074/article/details/123355389
版权

前端之表格

表格

预备知识：前端之HTML 表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

间距和布局

table-layout

设置表格的布局算法：

<style>
	table-layout: fixed;
</style>

table-layout: fixed，您可以根据列标题的宽度来规定列的宽度。所以
表头thead内的表头单元格th的宽度要指定设置。

整个表的列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。
在这里插入图片描述

border-collapse

设置表格的边框是否被合并为一个单一的边框
在这里插入图片描述

padding

和元素上设置了一些padding，是表格数据看起了不拥挤。

字符间距

letter-spacing属性，有助于提高可读性。

在这里插入图片描述

link添加字体样式

<style>
    <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
</style>

自定义字体

font-family：指定字体；可以指定多个，优先级是从左到右，那个有效用那个。

图形和颜色

<style>
thead,
tfoot {
    background: url(../images/leopardskin.jpg);
    color: white;
    text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    border: 3px solid purple;
}
</style>

斑马条纹图案

<style>
tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
</style>

样式化标题

<style>
caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}
</style>

font-style和font-family的区别：
在这里插入图片描述
caption-side：
在这里插入图片描述

网页实例

牛刀小试

在这里插入图片描述

网上找的一张表如下：在这里插入图片描述

裸表

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<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>表格——牛刀小试</title>
    <link rel="stylesheet" href="./styles/table-test.css">
</head>

<body>
</body>
<table>
    <caption>大道影视制作有限公司职员一览表</caption>
    <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">性别</th>
            <th scope="col">出生年月</th>
            <th scope="col">学历</th>
            <th scope="col">职务</th>
            <th scope="col">基本工资</th>
            <th scope="col">浮动工资</th>
            <th scope="col">生活补贴</th>
            <th scope="col">总收入</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">钱亮</th>
            <td>男</td>
            <td>1975/3/5</td>
            <td>大学</td>
            <td>工程师</td>
            <td>1300</td>
            <td>1800</td>
            <td>170</td>
            <td>3270</td>
        </tr>
        <tr>
            <th scope="row">周岳</th>
            <td>男</td>
            <td>1969/6/30</td>
            <td>研究生</td>
            <td>总工程师</td>
            <td>1500</td>
            <td>2000</td>
            <td>200</td>
            <td>3700</td>
        </tr>
        <tr>
            <th scope="row">郑涛</th>
            <td>男</td>
            <td>1973/2/1</td>
            <td>研究生</td>
            <td>高级工程师</td>
            <td>1200</td>
            <td>2000</td>
            <td>150</td>
            <td>3350</td>
        </tr>
        <tr>
            <th scope="row">刘彦波</th>
            <td>女</td>
            <td>1971/2/15</td>
            <td>大学</td>
            <td>供销经理</td>
            <td>1200</td>
            <td>1500</td>
            <td>200</td>
            <td>2900</td>
        </tr>
        <tr>
            <th scope="row">韩清</th>
            <td>女</td>
            <td>1970/5/21</td>
            <td>大学</td>
            <td>经济师</td>
            <td>1300</td>
            <td>2100</td>
            <td>160</td>
            <td>3560</td>
        </tr>
        <tr>
            <th scope="row">张丽</th>
            <td>女</td>
            <td>1974/9/2</td>
            <td>大学</td>
            <td>工程师</td>
            <td>1250</td>
            <td>1800</td>
            <td>190</td>
            <td>3240</td>
        </tr>

        <tr>
            <th scope="row">赵亚美</th>
            <td>女</td>
            <td>1972/2/21</td>
            <td>大专</td>
            <td>秘书</td>
            <td>1000</td>
            <td>1500</td>
            <td>120</td>
            <td>2620</td>
        </tr>
        <tr>
            <th scope="row">林丽娟</th>
            <td>女</td>
            <td>1974/10/1</td>
            <td>大专</td>
            <td>经济师</td>
            <td>1100</td>
            <td>1200</td>
            <td>200</td>
            <td>2500</td>
        </tr>
    </tbody>
</table>

</html>

效果：
在这里插入图片描述

表格布局

<style>
table {
    /* 布局方式 */
    table-layout: fixed;
    /* 去掉表格间隙 */
    border-collapse: collapse;
    /* 表宽：响应式 */
    width: 100%;
    /* 表格外边框 */
    border: 3px solid black;
}
</style>

效果：
在这里插入图片描述

添加表头样式

宽度

<style>
/* 表头样式 
table-layout:fixed；布局
表格内容与表头是同等宽度的
*/
thead>th:nth-child(1) {
    width: 10%;
}

thead>th:nth-child(2) {
    width: 10%;
}

thead>th:nth-child(3) {
    width: 10%;
}

thead>th:nth-child(4) {
    width: 10%;
}

thead>th:nth-child(5) {
    width: 20%;
}

thead>th:nth-child(6) {
    width: 10%;
}

thead>th:nth-child(7) {
    width: 10%;
}

thead>th:nth-child(8) {
    width: 10%;
}

thead>th:nth-child(9) {
    width: 10%;
}


</style>

效果：
在这里插入图片描述

表格内容

<style>
/* 表格内容 
居中 边框 字间距*/


th,
td {
    text-align: center;
    border: 1px solid black;
}

th {
    letter-spacing: 2px;
}

td {
    letter-spacing: 1px;
}
</style>

在这里插入图片描述

斑马条纹

<style>

thead tr {
    color: white;
    background-color: black;
}

tbody tr:nth-child(2n) {
    background-color: yellow;
}

tbody tr:nth-child(2n+1) {
    background-color: greenyellow;
}
</style>

在这里插入图片描述

标题

<style>
table caption {
    caption-side: top;
    font-size: 1.2em;
    text-align: center;
    text-shadow: 1px 1px 1px black;
    margin: 5px;
}
</style>

改：

<style>
th,
td {
    text-align: center;
    padding: .2em;
    border: 1px solid black;
}
</style>

半屏：
在这里插入图片描述
全屏：
在这里插入图片描述
手机屏幕：
在这里插入图片描述
文字自动换行：
word-break: break-all;

<style>
th,
td {
    text-align: center;
    padding: .2em;
    border: 1px solid black;
    word-break: break-all;
}
</style>

在这里插入图片描述
网页实例

下一节：前端之CSS调试与CSS风格

一只爱吃萝卜的小兔子
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
响应式web开发网页案例 ——29款表单模板
x163326的专栏
01-27 2172
如果你正在寻找有趣的响应式web开发网页案例，那你找对地方了。本文与大家分享一下，点击图片即可下载。 1、 【网页响应式开发】粉红简洁登录框表单模板 大小：124 KB 下载地址：http://www.177347.com/view-105-36247-0.html  2、 【网页响应式开发】合作信息表单模板 大小：70 KB 下载地址：http://www.177347.com/view-105...
尚硅谷前端HTML+CSS学习笔记
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。计算机由硬件和软件组成，硬件是看得见摸得着的物理...
html table+css实现可编辑表格
xingdiango的博客
12-21 2045
在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable="true" 属性的单元格可以被鼠标点击并接受用户输入。JavaScript 部分遍历表格的所有单元格，并为每个单元格添加输入事件侦听器。在输入事件处理程序中，你可以根据需要处理用户的输入，比如更新数据或触发其他操作。要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。
html可编辑的表格
热门推荐
龚清林的博客
09-03 1万+
<!DOCTYPE html > <html > <head> <meta charset="utf-8" /> <title>可编辑表格</title> <style> table.wTable { margin-top:15px; border-collapse:collapse; border:1px solid #aaa; width:100%; } table.wTable th { vertical-a
Vue经典实例之可编辑的表格table（史上最简单方便的处理方式，比用element容易理解），同时处理input获取焦点的问题！不好用你找我
最新发布
2401_84093899的博客
04-08 1139
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
极致舒适的 Vue 可编辑表格
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
06-21 2482
使用ElementPlus的Table啥都好，就是没有可编辑表格！！！????既然UI库不支持，那我们实现一个可编辑表格是很难的事么？????难么？????不难么？...个人觉得如果是业务固定的可编辑表格，使用ElementPlus实现都不难。但是如果需要的是一个通用的可编辑表格，这好像还真说不好。对于通用的可编辑表格，网上的实现方案也是五花八门，但是看下来多少都有些问题。个人认为一个通用的可编辑表格需要给使用方提...
nth-child选择器用于表格
begieの笔記
05-24 369
行中格与格之间的区别： :nth-child() /*此处补充样式*/ thead tr th{ background:yellow; } tbody tr td:nth-child(odd){ color:orange; }
HTML表格与表单标签
sun12345678_的博客
07-18 582
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以标签开始。每个自定义列表项以开始。每个自定义列表项的定义以开始。< h2 > 减肥运动排行榜 < dl > < dt > 1、壁球 < dd > 每半小时消耗热量三百卡。可锻炼两腿灵活性，可增加速度能力。但心肺功能较差者不宜。 < dl > < dt id = " th1 " > 2、跳绳 < dd > 每半小时消耗热量四百卡。
前端css+html.docx
03-10
前端开发是构建网页或应用程序界面的重要部分，HTML和CSS是其基础。本文将深入解析这两个关键技术。 HTML（HyperText Markup Language）是用于创建网页结构的语言。在HTML中： 1. **文本格式化标签**：`<strong>` ...
前端学习笔记(B站黑马程序员)
11-17
在前端开发领域，HTML（HyperText Markup Language）是构建网页的基础，它是一种标记语言，用于描述网页的内容和结构。HTML标签是其核心组成部分，它们通过尖括号包围，如`<html>`、`<head>`、`<body>`等，通常成对...
一款可以像excel一样进行编辑的前端表格，可以进行表格的编辑，合并，删除行，插入行等操作
12-12
一款可以像excel一样进行编辑的前端表格，可以进行表格的编辑，合并，删除行，插入行等操作。里面有例子， 直接打开html文件可以看到一个例子表格
js+html实现的Table可编辑
04-26
此代码是实现单击操作表格，用js和css 简单的实现类似于编辑器中的table
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
HTML标签速查参考手册（实用速查收藏版）
05-10
HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。它构成了互联网上大部分页面的基础，通过使用一系列标签来定义文档的结构和...理解并熟练掌握HTML标签，是成为前端开发者的关键步骤之一。
手把手教你实现一个可编辑的Table
不想起床
08-31 1229
主要实现功能 * 在线编辑 * 支持键盘导航 * 支持批量复制粘贴
Vue 实现 html 表格 (grid) 单元格编辑功能
yxp 的博客
02-09 3061
这里写自定义目录标题Vue 实现表格单元格的原位编辑起初功能问题期待天降大神前来解救。 Vue 实现表格单元格的原位编辑 这里是 Vue 初学者的笔记，老鸟请回避。如果你是热心的前辈，热切期盼您留下宝贵的意见。 起初 有一个小需求，我希望通过浏览器读入 excel 文件，并可以在网页上修改数据，查了一些 grid 编辑的 JS 插件，真是多如牛毛，导致了我的选择困难症发作。而为了编辑几个简单的数据，专门引入插件似乎有点不划算，我决定自己写。花一个小时认真阅读 Vue 介绍后开始动手码砖，成功如下： 功能
表格的小细节
red_HTML的博客
07-15 96
表格小细节
利用HTML的contenteditable直接修改表格数据
LoveZJC96的博客
08-16 1068
点击单元格可以 直接修改element-ui的数据，可以用contenteditable这个html的属性。
html表格excel导出
12-01
以下是两种将HTML表格导出为Excel文件的方法： 1. 使用js-xlsx插件导出excel ```javascript // 引入js-xlsx插件和FileSaver.js库 <script src="https://cdn.bootcss.com/xlsx/0.14.3/xlsx.full.min.js"></script> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值