前端开发 创建一个漂亮的表格HTML语言，初学前端者必须掌握的知识，那些年一起T跳过的坑都在这里，快来吧

最新推荐文章于 2023-10-01 11:59:29 发布
最新推荐文章于 2023-10-01 11:59:29 发布
阅读量618 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116412/article/details/105301753
版权 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css实例练习</title>
        <style>
        .biaoti{
	font-family: 微软雅黑;
	font-size: 26px;
	font-weight: bold;
	border-bottom:1px dashed #CCCCCC;
	
}
.tabtop13 {
	margin-top: 13px;
}
.tabtop13 td{
	background-color:#ffffff;
	height:25px;
	line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
	font-family: 微软雅黑;
	font-size: 26px;
	font-weight: bold;
	border-bottom:1px dashed #CCCCCC;
	color: #255e95;
}
.titfont {
	
	font-family: 微软雅黑;
	font-size: 16px;
	font-weight: bold;
	color: #255e95;
	background: url(../images/ico3.gif) no-repeat 15px center;
	background-color:#e9faff;
}
.titfont1 {
	
	font-family: 微软雅黑;
	font-size: 16px;
	font-weight: bold;
	color: #255e95;
	background: url(../images/ico3.gif) no-repeat 15px center;
	background-color:#e9faff;
}
.tabtxt2 {
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	color:#327cd1;
}
.tabtxt3 {
	font-family: 微软雅黑;
	font-size: 14px;
	padding-left: 15px;
	color: #000;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 20px;
}
.cou{
    border:1px solid #327cd1;
    border-collapse:collapse;
}
        
        </style>
        </head>
        <body>
            <table width="100%" border="0.5" cellspacing="0" cellpadding="0" align="center" bgcolor="">
                <tr >
                  <td align="center" class="biaoti" height="60"  >学生基本信息</td>
                </tr>
                </table>
                <table width="100%" class="cou"border="1" cellspacing="1" cellpadding="4"  class="tabtop13" align="center">
                    <tr>
                        <td width="20%" align="center" class="btbg font-center titfont" >姓名：</td>
                        <td width="80%"></td>
                    </tr>
                    
                </table>
                <table width="100%" class="cou" border="1" cellspacing="1" cellpadding="4">
                    <tr>
                        <td width="20%" align="center"class="btbg font-center titfont">学号：</td>
                        <td width="30%" align="center"></td>
                        <td width="20%" align="center"class="btbg font-center titfont">班级：</td>
                        <td width="30%" align="center"></td>
                    </tr>
                    <tr>
                        <td width="20%" align="center"class="btbg font-center titfont1">性别：</td>
                        <td width="30%" align="center"></td>
                        <td width="20%" align="center"class="btbg font-center titfont1">民族：</td>
                        <td width="30%" align="center"></td>
                    </tr>
                   
                </table>
                <table width="100%" border="1" class="cou" cellspacing="0" cellpadding="0" align="center"bgcolor="">
                    <tr>
                      <td align="center" class="biaoti" height="60">体测信息</td>
                    </tr>
                    </table>
                    <table width="100%" border="1"class="cou" cellspacing="1" cellpadding="4">
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont"></td>
                            <td width="20%" align="center"class="btbg font-center titfont">大一</td>
                            <td width="20%" align="center"class="btbg font-center titfont">大二</td>
                           
                            <td width="20%" align="center"class="btbg font-center titfont">大三</td>    
                            <td width="20%" align="center"class="btbg font-center titfont">大四</td>                            
                        

                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">身高</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">体重</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">肺活量</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">50m</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">长跑</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">跳远</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">坐位体前屈</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                        <tr>
                            <td width="20%" align="center"class="btbg font-center titfont">引体向上</td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                            <td width="20%" align="center"></td>
                        </tr>
                       
                    </table>

        </body>

粉尘伴终生
关注
时隔一年半，我，一个卑微的前端初学者，又来写面经了
爱前端也爱恋爱
12-02 1967
高德 滴滴 美团 网易 快手 腾讯 金山 360 百度 知乎 微软等大厂面试经验 一年半以前，写了个万字前端面经，最终去了字节混饭吃，因为一些业务调整的原因，我又跑路了，没写一面二面都是一轮挂的或者后面我不想面了的，附带部门的是挂了或者我拒了之后又面了另外的部门，按照一面开始时间先后排序，还有很多优秀的公司我面了但是忘记录音，比如momenta、完美世界、掌阅等等。现已完成更新，全文共计一万三千字， 每家的自我介绍和离职原因部分我就省略了~ “我自己是一名从事了6年web前端开发的老程序员，今年年..
【愚公系列】《AIGC辅助软件开发》015-AI辅助前端编程：利用 ChatGPT 写代码
最新发布
时光隧道
07-27 1万+
在数字化时代的浪潮中，前端开发面临着日益增长的挑战与机遇。随着用户对网站与应用体验的要求不断提高，开发者们需要更高效、更智能的工具来提升工作效率。近期，人工智能技术的迅猛发展为这一领域带来了新的变革，尤其是像 ChatGPT 这样的 AI 模型，成为了开发者的得力助手。本文将探讨如何利用 ChatGPT 来辅助前端编程，从代码生成到问题解决，我们将分享实际案例与技巧，帮助你在开发过程中事半功倍。无论你是前端开发的新手，还是经验丰富的工程师，相信这篇文章都能为你提供新的视角与灵感。
漂亮的表格css+html
02-11
一个很好的表格html代码，里面包含了css表格类型，界面清晰、清爽、相当的漂亮！
js前端，一个漂亮的自写表格table
hwlll的博客
05-10 2980
将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色。由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动。然后利用timer定时器和scrollTop 属性设置滚动效果，table里的数据在data里返回，以下是实例数据。这样我们就拥有了一个没有样式的基础表格。
前端切图：一个好看的表格css样式
weixin_30416871的博客
11-28 275
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" id="...
HTML 做个漂亮的表格
dhxb45678的博客
01-28 1万+
本期我们主要讲述怎样做一个简单漂亮的表格，外加一点关于 表格 这方面的一些笔记和注意点。 目录 相关笔记 一、基本结构 二、相关属性（可以直接写在标签里） 三、合并单元格 实践：做一个 biu特佛 的表格 相关笔记 一、基本结构 <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th..
漂亮的表格 HTML表格
07-01
漂亮的表格html,鼠标移动到表格上会自动通过CSS效果选中一行以及一列。
Web前端全栈HTML5+大神之路-视频课程资源网盘链接提取码下载 .txt
03-16
- 通过三个阶段的学习，帮助学员全面掌握Web前端开发的核心技术和实战经验。 - 培养学员成为具备HTML5、CSS3、JavaScript等基础知识以及前端框架、后端开发能力的全栈开发者。 - 强化实践操作能力，确保学员能够独立...
基于createJS函数库的各类图形处理的前端基础知识，实现HTML5小游戏经典案例.zip
02-14
在这个“基于createJS函数库的各类图形处理的前端基础知识，实现HTML5小游戏经典案例”中，我们将深入探讨如何利用createJS这个强大的JavaScript库来实现动态图形和游戏开发。 CreateJS是一个开源的JavaScript库...
一年前端开发工程师简历_一年前，我开始学习编码，专注于前端开发。
cumi6497的博客
07-08 1666
一年前端开发工程师简历A year ago I started learning to code, focusing on front-end development. This was not completely new to me, as I’ve been doing this learning to code thing for a few years now. Most of the ...
一个经典好看的web表格
04-10
一个好看的web表格，设计网页不再愁dsfasdfasdfsdfasdfsdfasdf
html好看的表格
09-15
好看的html表格，可以做好的例子，希望能和大家分享，谢谢大家啊
js实现漂亮的table表格
07-27
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
宝藏女孩的成长日记
09-28 1万+
html如何制作一个漂亮的表单？列表的三种形式+表单制作（传统以为post提交看不见密码，而右键检查是可以看到的）
水之原 HTML - 创建漂亮的表格元素
TdMaster的博客
10-01 933
HTML（超文本标记语言）是构建网页的基础语言之一，而表格元素是 HTML 中常用的一种组件，用于展示和组织数据。通过运用这些技术，你可以创建出各式各样的表格，满足不同需求的展示和组织数据的要求。除了基本的表格结构和样式，HTML 还提供了其他一些元素和属性，用于进一步定制表格。通过使用这些元素和属性，你可以更灵活地组织和展示表格数据，使其更具可读性和美观性。总结起来，HTML 提供了丰富的表格元素和属性，用于创建漂亮的表格。，我们合并了单元格之间的边框，使表格看起来更整洁。元素定义了表格的主体部分，而。
CakePHP Layout
talenthua的博客
11-03 748
Apache start 2.css hello.css C:\xampp\htdocs\mycakeapp\webroot\css html { margin: 0px; } body { margin:0px; } h1 { font-size:48pt; margin:0px 20px; color:#bbf; } p { font-size:14pt; color:#669; } .head { width: ...
用html制作一个表格
begin_glory的博客
01-20 1519
用html制作一个表格 基本格式为： 运行结果如下 表头单元格也是单元格，常用于单元格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
《Node.js实战指南》：快速掌握服务器端JavaScript开发
Eric Redmond（《七个星期七种数据库》合著者）认可《Node.js：正确的方式》是一本实用性强、内容丰富的读物，它跳过了简单的示例，而是通过实际案例演示Node.js的应用潜力，让读者能够快速领略其在服务器世界中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

粉尘伴终生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值