HTML——表格的基本样式

最新推荐文章于 2024-05-14 15:13:11 发布
最新推荐文章于 2024-05-14 15:13:11 发布
阅读量1.8k 收藏 14
点赞数 2
分类专栏： html 文章标签： border属性 colspan合并列 rowspan合并行 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iheyu/article/details/99843936
版权

表格在以前用的比较多，之前的表格主要是作面布局！表格的代码不好维护不推荐使用！

div+css布局就代替表格！

1.在页面里面做表格用——> <table></table>——>在页面的表格是怎么定义的——>表格组成元素是行——> <tr></tr> ——>把一行分成了若干单元格——>标题标签——> <th></th>——> 内容标签——><td></td>;

2.表格在页面上显示：

1.快捷方法：行

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=biaoge, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table>
        tr*4
    </table>
</body>
</html>

2.标题——>内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=biaoge, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table>
        <tr>
            <th>部门</th>
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
            th*4
        </tr>
        <tr>
            td*4
        </tr>
        <tr></tr>
        <tr></tr>
    </table>
</body>
</html>

3.显示没有边框的表格代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=biaoge, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table>
        <tr>
            <th>部门</th>
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        
        </tr>
        <tr>
            <td>开发组</td>
            <td>小明</td>
            <td>男</td>
            <td>1w</td>
        </tr>
        <tr>
            <td>开发组</td>
            <td>小梅</td>
            <td>女</td>
            <td>1w</td>
        </tr>
        <tr>
            <td>开发组</td>
            <td>小刚</td>
            <td>男</td>
            <td>1w</td>
        </tr>
    </table>
</body>
</html>

显示效果：

部门

姓名

性别

工资

开发组

小明

男

1w

开发组

小梅

女

1w

开发组

小刚

男

1w

 

4.给表格加边框——>border属性(不要写成了proder)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=biaoge, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>部门</th>
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        
        </tr>
        <tr>
            <td>开发组</td>
            <td>小明</td>
            <td>男</td>
            <td>1w</td>
        </tr>
        <tr>
            <td>开发组</td>
            <td>小梅</td>
            <td>女</td>
            <td>1w</td>
        </tr>
        <tr>
            <td>开发组</td>
            <td>小刚</td>
            <td>男</td>
            <td>1w</td>
        </tr>
    </table>
</body>
</html>

5.colspan合并列,rowspan合并行;

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=biaoge, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>部门</th>
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        
        </tr>
        <tr>
            <td rowspan="4">开发组</td>
            <td>小明</td>
            <td>男</td>
            <td>1w</td>
        </tr>
        <tr>
            
            <td>小梅</td>
            <td>女</td>
            <td>1w</td>
        </tr>
        <tr>
            
            <td>小刚</td>
            <td>男</td>
            <td>1w</td>
        </tr>
        <tr>
            
                <td colspan="2">工资合计</td>
            
                <td>3w</td>
            </tr>

    </table>
</body>
</html>

 

 

iheyu
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-table表格详解
主营前端方向，技术栈是vue
11-17 2万+
table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)
HTML标记语言——表格标记
12-10
上文：标记语言——标题 原文出处 标准化设计解决方案 – 标记语言和样式手册 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 从标记语法谈起 Chapter2 邪恶的表格？ 你知道...
HTML的表格样式
Raccon_的博客
11-22 1233
HTML5 表格 <table> <tr> <th>1</th>(th为列标题 自动加粗居中) <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 属性: 宽度:width 高度:
html 简单的table样式
z_qifa的博客
07-03 2万+
效果预览： 代码： 1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>html 简单的table样式title> 6 style type="text/css"> 7 /* gridtable */ 8 table.grid
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 4707
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
html —— table 标签 与 display:table 样式
永远的北极光
04-01 1万+
目录：一、table 相关标签介绍及使用二、div 布局设置display：table一、table 相关标签介绍及使用相关标签按包含关系从大到小排序：table ——&gt; col | colgroup | thead | tbody | tfoot；thead | tbody | tfoot ——&gt; tr；tr ——&gt; th | td；说明：table：重要属性有border（单...
Html Table 样式
yuling59520的专栏
06-01 2万+
框线制作常用代码代码含义<table>...</table>建立表格，所有的其他标记都需要在此标记中  <table width=* heigth=*></table>设定表格宽度width和高度height，属性值可以使用点数，如：width=50，也可以使用百分比，如：width=50%。<table bgcolor=*></table> 表格背景色。属性值可使用颜色英文名称如：bgcolor=Blue，也可以使用十六进制值如：bgcolor=#799ED2 。<table background=*><
html中table的样式设置
sunyv1的博客
07-13 8531
因为用到了一个自定义的表格所以这里记录一下样式写法 这里的样式基本上指的是边框了 先说明一下设置边框的方式 设置table的border属性，如下。当然样式我就不说了不建议这么干 <table border="1"></table> 之后的两种都是用css实现的，这里先说一种 //边框什么的自己写吧 table{ //主要用到的就是这个属性，这个属性可以让边框重叠，就是让两个边框加一起没那么宽了 //实际上并不好使，因为涉及到重叠问题，坑就不说了 border-col
HTML5制作表格样式
09-27
接下来是关键部分——表格的HTML结构。`<table>`元素是表格的容器，`<thead>`表示表头，`<tbody>`表示表格主体，`<tfoot>`表示表尾。例如： ```html 列1 列2 行1，单元格1 行1，单元格2 行2...
html纯css实现表格样式
01-04
本教程将深入探讨如何使用纯 CSS 实现美观且功能丰富的表格样式。 表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。...
HTML表格布局实例讲解
12-13
这里我们将讨论一种传统的布局方法——使用HTML表格（`<table>`）。 表格布局虽然在过去被广泛用于网页设计，但如今已不再被视为最佳实践。主要原因是表格布局限制了灵活性，并可能导致内容在不同屏幕尺寸下的响应...
HTML-----第二章表格及样式
BUG专业户
05-20 3272
表格 CSS样式入门 基础选择器
如何使用vscode编写html表格
2301_76886025的博客
03-07 4893
第一：编写表格框架 第一行为整体框架，border和cellspacing为边框距离 第二行为框架内容，要在<tr>…</tr>中编写，<th>…</th>为次行的内容以及字体加粗。 可以多次在<tr>…</tr>中编写其他行内容 <td> …</td>编写每行内容。 第二：添加照片 在<td> …</td>加入<img src="照片链接（可以直接复制照片插入
轻松解决HTML + CSS各种表格问题
shenmill的博客
08-07 9545
表格那些事：简单复杂的表格样式，高度固定表头固定，横向滚动条等。
使用VSCode生成代码、查询数据表
最新发布
l2136965495的博客
05-14 1005
where、and、between and、group by、order by desc、聚合函数sum、avg、max、count函数、最后需要使用limit进行分页显示第二条前两条，每页显示3条"“给我生成一个student表，要求有id,createDate,userName,phone,age,sex,introduce的列信息,给我DDL与DML,5条信息都为中文信息，并且有一个userName必须等于张先生”请根据DDL和DML生成一个存储过程，要求：1、写出完整的注释。3、查询信息为张先生。
好看的php表格样式,CSS_CSS实现的清爽、漂亮的表格样式分享，效果： 实现代码：复制代码 - phpStudy...
weixin_30937427的博客
03-09 458
CSS实现的清爽、漂亮的表格样式分享效果：实现代码：复制代码代码如下:CSS实现的清爽、漂亮的表格样式 - jb5t1.net/* CSS Document */ body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;...
07.HTML------03.表格的样式
weixin_52551539的博客
11-14 2296
我们可以对表格设置样式，在设置样式我们可以将表格当成块元素来处理（与块元素不同的是，他的宽度默认是由内容撑开的），我们可以设置表格的宽度，位置（左右边距、居中、边框border），也可以设置对单元格的样式（边框--不设置的话默认就没有，单元格之间的距离以及单元格边框合并，要注意的是这个样式要在table里面设置而不是在td里面）进行设置。 1. 设置表格table样式： 设置单元格边框之间的距离：border-spacing:多少像素；当距离设置为0时，相邻...
8款设计师常用漂亮的HTML CSS表格样式
热门推荐
大树叶 技术专栏
03-05 3万+
原来的地址： http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计，如今都更流行使用CSS设计，这样对于网站结构更加友好和轻便。下面老左整理的8款设计师常用漂亮的HTML CSS样式是在国外网站看到的，也有用到自己的网站中，顺带分享到博客中，以便日后使用的时候直接下载，当然有需要的也方便网友朋友使用。 第一、简单的表格

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值