css+html表格制作

最新推荐文章于 2024-05-14 16:52:58 发布
最新推荐文章于 2024-05-14 16:52:58 发布
阅读量779 收藏 9
点赞数
分类专栏： 前端小东西 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lutrra/article/details/120616649
版权 
<!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>
    <style>
        /* 表头 */
        table{
            margin: 0 auto;
            font-size: 16px;
            border-bottom: 1px solid black;
        }
        caption{
            font-family: '华文行楷';
            font-size: 50px;
        }
        td{
            border: 1px solid black;
            width: 100px;
            height: 30px;
            text-align: center;
        }
        /* 设置表格为空 */
        .none_line td{
         border-style: none;   
        }
        .main_table{
            border-right: 1px solid black;
            border-left: 1px solid black;
        }
    </style>
</head>
<body>
     <!-- 12行，8列 -->
     <table height="50" width="1000" cellspacing="0">
         <!-- 表头 -->
         <caption>员工信息登记表</caption>
         <!-- 第一行 -->
         <tr class="none_line">
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
         <!-- 第二行 -->
         <tr class="none_line">
            <td  style="text-align: left;" colspan="4">编号:</td>
            <td style="text-align: left;">入职日期:</td>
            <td>年</td>
            <td>月</td>
            <td>日</td>
        </tr>
     </table>
     <table class="main_table" height="400" width="1000" cellspacing="0">
        <tr class="head_border">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>生日</td>
            <td></td>
            <td colspan="2" rowspan="5"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>学历</td>
            <td></td>
            <td>婚姻</td>
            <td></td>
            <td>民族</td>
            <td></td>
            
        </tr>
        <!-- 第5行 -->
        <tr>
            <td>专业</td>
            <td></td>
            <td>毕业学校</td>
            <td colspan="3"></td>
        </tr>
        <!-- 第6行 -->
        <tr>
            <td>健康状况</td>
            <td></td>
            <td>户籍所在地</td>
            <td colspan="3"></td>
        </tr>
        <!-- 第7行 -->
        <tr>
            <td>手机号码</td>
            <td></td>
            <td>身份证号码</td>
            <td colspan="3"></td>
        </tr>
        <!-- 第8行 -->
        <tr>
            <td>紧急联系人</td>
            <td colspan="2"></td>
            <td colspan="2">紧急联系人电话</td>
            <td colspan="3"></td>
        </tr>
        <!-- 第9行 -->
        <tr>
            <td style="writing-mode: vertical-lr;" rowspan="3">教育情况</td>
            <td colspan="2">起止时间</td>
            <td style="letter-spacing: 16px; text-indent: 16px;" colspan="2">就读学校</td>
            <td>专业</td>
            <td colspan="2">是否毕业</td>
        </tr>
        <!-- 10 -->
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <!-- 11 -->
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2"></td>
        </tr>
     </table>
</body>
</html>

在这里插入图片描述

Lutrra
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
几个html+css常用表格
weixin_48271592的博客
07-13 1276
几个常用的纯html+css表格： 有时候ui框架提供的表格并不能完全满足我们的需求，这时候就需要手写表格了。我把最近用的到几个表格存一下，方便以后CV。 1.普通斑马纹表格（公司信息、个人信息表）： 例如： 1、 效果图 2、 HTML代码 <table class="printTB detailTb gua-detail-table" cellspacing="0" cellpadding="0"> <tbody> <
HTML+CSS制作表格
qq_64867440的博客
10-25 621
使用的内联式，因为代码较少，但是正规应该把两部分分开写，减少错误。二.HTML+CSS。
CSS 基础教程：表格（一）
最新发布
m0_65012566的博客
05-14 348
表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
纯css实现表格
leoz1的博客
03-05 613
【代码】纯css实现表格。
简单实用：css+html绘制常见图表
技术圈
12-09 3974
提到绘制图表，大家可能想到ECharts，其实，一些简单的图表可以直接通过css+html实现，下面手把手带大家绘制，初学者也能轻松掌握。
HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip
07-06
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
CSS+HTML日历制作
11-19
这个“CSS+HTML日历制作”的主题聚焦于如何使用这两种技术来创建一个直观、实用的日历组件。下面我们将深入探讨这个过程，以及涉及到的关键知识点。 首先，HTML用于构建日历的基本结构。一个简单的日历可能由一个...
html+css制作小米官网
07-18
在本项目中，“html+css制作小米官网”是一个学习前端技术的实践案例，主要涵盖了HTML和CSS的基础知识。HTML（HyperText Markup Language）是用于创建网页结构的语言，而CSS（Cascading Style Sheets）则负责定义...
基于html+css+js开发的俄罗斯方块前端游戏【100013109】
07-27
本项目总体分为四个文件夹:html,css,js,img。img包含了背景图片。html中只有index.html，负责游戏的展示。css文件中只有index.css，负责对index.html的美化。游戏具体逻辑包含在js文件中。 js文件夹中，const.js...
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划.docx
12-18
《HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)》是一门旨在教授Web前端开发基础知识的课程，涵盖了HTML5、CSS和JavaScript的核心概念和技术。课程内容详细且实用，旨在帮助学生掌握网页设计和开发的基本技能。...
利用CSS生成精美细线Table表格
03-19
NULL 博文链接：https://javapub.iteye.com/blog/733910
教你如何用原生css和html搭建一个好看的Table表格
抗争小青年的博客
11-27 8468
大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：或者是这样的：大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。
用html和css写表格(table)
weixin_49853257的博客
11-30 2150
表格 1.表格的结构 <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>9</td> <td>10</td&
html+css画表格,[八]HTML+CSS基础（表格）
weixin_39765840的博客
06-27 466
*** 一，创建一个表格:***使用table标签tr表示表格中的一行。tr中可以编写一个或多个th或td。th表示表头。td表示表格中的一个单元格。DocumentID书名作者001《解忧杂货铺》东野圭吾002《时生》东野圭吾003《祈祷落幕时》东野圭吾table.png二，合并单元格：合并单元格指将两个或两个以上的单元格合并为一个单元格。 合并单元格可以通过在th或td中设置属性来完成。横向合...
HTML+CSS绘制表格
11-01 5915
概述： 本篇利用HTML和CSS完成表格的绘制，实现单元格高亮和表格圆角效果，如下图： 代码： table.html Tables Demo Modbus Protocol Data Num Address Type Data 1 0x01 uns
html+css:非常漂亮的4款html表格设计
weixin_30325793的博客
11-07 2万+
1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码： <!-- CSS goes in the document HEAD or added to your external stylesheet --> <style type="text/css"> table.gridtable { font-family: verdana,a...
【HTML+CSS+JavaScript】表格生成器
weixin_30379973的博客
08-13 793
需求：表格生成器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格生成器</title> <style> input { paddi...
html table生成器,table表格生成器
weixin_34571272的博客
06-07 1357
Documenttd{width: 20px;height: 70px;}请输入行数:请输入列数:请输入宽度:请输入边框:请输入内容:function ok(){var rows=document.getElementById('rows').value;var cols=document.getElementById('cols').value;var width=document.getEle...
html+css+js 表格制作增删改查
08-21
HTML、CSS和JavaScript可以用来创建、修改和查询表格。下面我将逐步解释每个步骤。 首先，在HTML中，我们可以使用`<table>`标签来创建表格结构。在`<table>`标签中，我们可以使用`<tr>`标签创建表格的行，使用`<th>...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值