前端知识HTML表格

最新推荐文章于 2022-12-30 20:59:30 发布
最新推荐文章于 2022-12-30 20:59:30 发布
阅读量130 收藏
点赞数
分类专栏： 08前端知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013638465/article/details/103589849
版权

表格样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <style>
        /* 表格1*/
        .table{
                width: 500px;
                height: 200px;
                /* border: 1px solid black; */

                /* 表格边框合并 */
                border-collapse: collapse;
                text-align: center;

                margin: 0px auto;

        }

        .table td{
            font-family: "Microsoft Yahei";
            border: 1px solid black;
        }

        .table th{
            border: 1px solid black;
        }


    /* 表格2*/

        .resume{
                width: 708px;
                height: 249px;

                margin: 0 auto;

                border-collapse: collapse;
            }

            .resume td,.resume th{
                border: 1px solid #bcc0bf;
                text-indent: 10px;
            }

            .resume th{
                text-align: left;
                background-color: #ebfaf3;
            }

            .resume td{
                font-size: 16px;
                font-family: "Microsoft Yahei";
            
            }

            .resume .icon{
                text-indent: 0px;
                /* text-align: center; */

            }
            .resume .icon img{
                float: left;
                /* vertical-align: middle; */

            }


    </style>


</head>
<body>
    <table class="table">
        <tr>
            <th>1</th>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="3">1</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td colspan="2" rowspan="3">3</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>5</td>

        </tr>

    </table>
<p></p>
    <table class="resume">
            <tr>
                <th colspan="5" height="35px">基本信息</th>
          
            </tr>
            <tr> 
                <td width="15%">姓    名</td>
                <td width="25%"></td>
                <td width="15%">性    别</td>
                <td width="25%"></td>
                <td width="20%" rowspan="5" class="icon"><img src="./images/chengxuyuan.jpg" alt="程序人"></td>
            </tr>
            <tr>
                <td>名    族</td>
                <td></td>
                <td>出生日期</td>
                <td></td>
                
                
                
                
                
            </tr>
            <tr>
                <td>政治面貌</td>
                <td></td>
                <td>健康情况</td>
                <td></td>
    
            </tr>
            <tr>
                <td>籍    贯</td>
                <td></td>
                <td>学    历</td>
                <td></td>
    
            </tr>
            <tr>
                <td>电子信箱</td>
                <td></td>
                <td>联系电话</td>
                <td></td>
    
            </tr>
        </table>

</body>
</html>

 

易择365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
9、前端开发：CSS知识总结——表格表单
ydc222的博客
09-11 455
表格表单
前端知识之HTML内容
10-09 91
web服务实质 浏览器发送请求 --》HTTP协议-->服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while ...
前端HTML基础知识
m0_52293697的博客
12-30 229
HTML基础语法、表单、标签
「前端-HTML」 HTML-表格-表单-第二篇
枫梓林のBlog
10-20 455
前端-HTML-第二篇 这是HTML第二篇，共三篇，如需看其他篇请点击跳转 目录前端-HTML-第二篇HTML 列表1.无序列表2.有序列表3.自定义列表其他pre标签HTML实体HTML 排版标签标签的通用属性1.id属性2.class属性----类3.name属性4.style属性HTML 表格1.相关标签汇总2.对齐方式3.单元格间距和填充4.合并单元格综合案例--个人简历HTML表单表单域表单元素1.文本框2.密码框3.单选框4.复选框5.文件上传6.普通按钮7.提交按钮8.重置按钮9.下拉菜单1
Web前端html表格制作
weixin_45742613的博客
11-16 3492
html表格制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <
关于前端html表格的一个问题
乖乖康少
10-23 486
在使用表格的时候，有时候会需要通过ajax等方式替换表格内容，比如：分页 但是，同时不希望替换表头   所以就需要用到thead、tbody、tfoot ，但是在使用的时候，出现不生效的问题   查看手册发现： 1、如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody。 2、&lt;thead&gt;...
头歌教学实践平台 Web前端开发基础 HTML-表格
最新发布
01-20
HTML表格由`<table>`标签定义，其中包含`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`（数据单元格）等元素。一个简单的表格结构如下： ```html 表头1 表头2 数据1 数据2 ``` `th`元素用于...
WEB前端技术-表格元素练习
12-27
1. `<table>`元素：它是HTML表格的基础，用于定义一个表格。在`<table>`标签内部，可以包含`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`等多种子元素。`<table>`具有多个属性，如`border`（边框宽度）...
HTML5基础知识-HTML5表格与列表.pptx
05-06
HTML5 是现代网页开发的基础，尤其在前端领域中扮演着至关重要的角色。表格和列表是HTML5中的两种重要元素，用于展示数据和组织内容。在HTML5中，表格（tables）和列表（lists）有着丰富的功能和样式设定，使得...
在学期间html前端知识总结
06-03
HTML表格是数据展示的重要工具，主要标签包括： 1. `<table>`：定义表格。 2. `<tr>`：定义表格行。 3. `<th>`：定义表头单元格。 4. `<td>`：定义普通数据单元格。 5. `<caption>`：定义表格的标题。 6. `...
前端从HTML开始——表格与列表
qq_45311602的博客
12-07 152
HTML知识点 HTML表格 结构 <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td> <
table的默认宽度之变化
帅气的鎏氓兔
09-02 3719
1.高度和宽度只能给table 和 td 使用。            2.水平对齐和垂直对齐： 水平对齐：能给table 和tr td 使用。 垂直对齐：tr td使用。           3.外边距和内边距只能给table使用。           注意点：px是像素的意思，在定义字体大小和一些元素的宽度、高度用到。           -->
从零开始，学习web前端之HTML基础
热门推荐
喻志强的博客
02-28 1万+
web前端之html基础
web前端-HTML-表格
jinchenpeng的博客
05-26 2026
例子： 再例如： 单元格的合并 表格的属性： 例如： 例如：去掉单元格之间的边距 表的行和列的属性： 例如： 单元格合并练习1: 单元格合并练习2：
前端HTML基本知识汇总
m0_61608123的博客
02-24 2178
前端，html 知识汇总，前端表单知识
前端-HTML基础知识详解
qq_52262831的博客
12-23 4950
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML-高级表格
dayunhanIT的博客
05-31 1083
使用 <caption> 为表格增加一个标题 你可以为你的表格增加一个标题，通过 <caption> 元素，再把 <caption> 元素放入 <table>元素中 <!DOCTYPE html > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
web前端-html基础-demo6表格
qq_36105224的博客
02-09 382
Demo6 表格 软件：HBuilderX 常用标签和属性： index1.html index2.html 两个写法结果相同，如下：
HTML前端入门：表格与表单详解
总结来说，HTML是网页设计的基础，掌握这些基本标签和表单知识对于前端开发至关重要。通过学习和实践，你可以创建出结构清晰、功能丰富的网页。继续深入学习CSS（层叠样式表）和JavaScript，将使你能够更精细地控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值