前端——表格样式2

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量511 收藏
点赞数
分类专栏： 前端学习 李立超
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44158539/article/details/109110268
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width:50%;
            border:1px solid black;
            margin:30px auto;
             /*
                border-spacing:0px；  设置边框间的距离为0，
                设置之后为双线，一般不建议使用

                border-collapse:
                   collapse,设置边框的单边合并
            */
            border-collapse:collapse;
        }
        td{
            border:1px solid black;
            height:100px;
            /*
               默认情况下元素在td中是垂直居中的，
               可以通过vertical-align来设置
                vertical-align:bottom;
              
            */
             /* text-align  文本居于行的中间*/
            text-align:center;
        }
        tr:nth-child(2n+1){
            background-color:red;
        }
        /*
          如果表格中没有使用tbody而是直接使用tr
            那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
            tr不是table的子元素，无法通过子元素选择器选择
        */
        .box1{
            width: 300px;
            height:300px;
            background-color:orange;     
            /*将元素设置为单元格,此方式使用不多，了解一下即可*/
            display:table-cell;
            /*设置为单元格以后可以使用vertical-align使元素垂直居中*/
             vertical-align:middle;
            margin:30px auto;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:yellow;
            margin:0 auto;
           
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>晴天</td>
            <td>男</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>2</td>
            <td>雨天</td>
            <td>女</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>3</td>
            <td>阴天</td>
            <td>男</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>4</td>
            <td>雪天</td>
            <td>女</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>晴天</td>
            <td>男</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>2</td>
            <td>雨天</td>
            <td>女</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>3</td>
            <td>阴天</td>
            <td>男</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>4</td>
            <td>雪天</td>
            <td>女</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>晴天</td>
            <td>男</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>2</td>
            <td>雨天</td>
            <td>女</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>3</td>
            <td>阴天</td>
            <td>男</td>
            <td>18</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>4</td>
            <td>雪天</td>
            <td>女</td>
            <td>18</td>
            <td>住址</td>
        </tr>
    </table>
</body>
</html>
恬一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（前端）HTML之表格
weixin_65479202的博客
04-21 1607
在HTML中学习表格非常有必要，表格的使用比较常见也很广泛！！！
前端学习笔记74-表格的样式
weixin_45034895的博客
05-07 1023
前端学习笔记74-表格的样式宽度边框border-spacingborder-collapse颜色相间td元素 宽度 首先，table是块元素，但是它有点不同，它的宽度是被内容撑开的，剩下的为margin。 当然，这个宽度是可以设置的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 4658
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 1969
WEB前端网页设计-Bootstrap5 表格
【前端学习记录5】边框样式、列表样式、表格样式、图片样式和背景样式
aftertasttea的博客
12-08 1689
一、边框样式 1、整体样式： (1)属性：border-width定义宽度 border-style定义外观：none无样式、dashed虚线、solid实线 border-color定义颜色：取值“关键字”或“十六进制RGB值” (2)简写形式： div{border:1p...
web前端
m0_74747565的博客
07-07 757
2day
头歌教学实践平台 Web前端开发基础 CSS-表格样式
01-20
"头歌教学实践平台"提供的"CSS——表格样式"课程，通过实际案例和练习，帮助学习者理解并运用上述知识点，提升Web前端开发技能。 总之，理解和掌握CSS在表格样式设计中的应用，对于构建美观且功能齐全的网页至关...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
03-22
而xlsx-style是SheetJS的一个扩展，它为SheetJS增加了样式支持，允许我们在前端生成具有丰富样式的Excel表格，如设置单元格背景色、文本居中、自动换行、调整宽度以及显示百分比等。 首先，让我们深入了解SheetJS的...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
静态门户网站实例——得艺
03-03
【静态门户网站实例——得艺】是一个使用jQuery框架构建的前端项目，主要涉及的技术栈包括jQuery、HTML、CSS和JavaScript。这个实例旨在展示如何利用这些技术创建一个动态且交互性强的静态网站，为用户提供丰富的...
【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式
qq_58559853的博客
06-01 3549
根据table绑定的数据设置不同的行或列样式
前端Table小技巧—基本用法和样式
qq_44552416的博客
06-10 2413
描述：写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头 tbody表格的身体 tfoot表格的脚) TBody是在table中使用的，用来指明由它包括的各表格行做为表格的主体部分。 TBody与
Web前端之表格
花&败
10-29 5631
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
前端的学习之路：初级HTML---表格的样式
weixin_44647555的博客
02-02 231
表格的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格的样式</title> <style> table{
「趣学前端」优雅又精致，来看看别人家的表格样式是怎样实现
banxianongtang的博客
11-03 630
用技术实现梦想，用梦想打开创意之门。今天分享前端CSS中的表格的知识点。
几款好看的css表格
热门推荐
HLLLLLL_的博客
03-30 1万+
表格一： 代码： html代码段： 是用vs写的 表头<th>那是从数据库读取的数据段,<td>那是我为测试效果加的代码，大家可以自行更改。 <h1>待处理订单</h1> <table id="all-requst"> <thead> <tr> ...
前端基础之《Bootstrap（6）—全局CSS样式_表单》
csj50的专栏
11-03 766
6、radio怎么只能选中一个，name相同的radio是同一个radio。3、表单浅灰色占位符（placeholder属性）2、输入框的样式（.form-control）1、基本表单（.form-group）4、单选框（.checkbox）5、多选框（.radio）
P60-前端基础HTML-表格样式
Bruce小鬼
01-25 1128
P60-前端基础HTML-表格样式 1.概述 表格样式的常用设置包含表格边框、单元格、对齐方式以及背景颜色。 2.表格样式案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的样式</title> <style> table { width: 50%; border: 1px solid blac
vscode:Web前端——登录、注册界面
06-07
2.编写HTML代码：根据设计的页面布局，编写HTML代码，将页面元素放到合适的位置。 3.使用CSS美化页面：通过CSS样式，可以实现页面的美化，例如颜色、字体、边框、背景等。 4.编写JavaScript代码：登录和注册功能...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值