原创投稿
  1. 创想鸟首页
  2. 用户投稿

html如何给table表单加边框

程序猿 • • 用户投稿

本章给大家介绍html如何给table表单加边框。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一般来说，给表格加边框都会出现不同的问题，以下是给表格加边框后展现比较好的方式

        table,table tr th, table tr td { border:1px solid #0094ff; }        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}           
        
内容内容内容内容内容
        
内容内容内容内容内容
        
内容内容内容内容内容
        
内容内容内容内容内容

但是根据不同的需要有时候我们需要不同的样式，在这里我就影响表格边框的因素，做一些总结和分析

一、

表格边框

1.jpg

如↑图，也就是border=1，意思就是给表格的每一格，及边框加上1像素的边框

立即学习“前端免费学习笔记（深入）”；

二、

cellspacing单元格间距

2.jpg

如↑图，这时表格大小为：200*118px

三、

cellpadding单元格边距

3.jpg

如↑图，这时表格大小为：200*110px

四、去掉表格中table的所有属性值，当在css中给table设置{border: 1px solid #151515}

4.jpg

如↑图，这个时候我们发现，css中的border其实就是给表格加了一个外边框而已

五、border-collapse: collapse 边框合并，该属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示

这个时候如果我们只是想给表格整体加边框，并且不需要边距和间距，其实我们只需要这么写：

    table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
        
内容内容内容内容内容
        
内容内容内容内容内容
        
内容内容内容内容内容
        
内容内容内容内容内容

如图↓

5.jpg

六、我们在上面的图中可以清晰看见，两个浏览器所解析边框不同。但是其实他们是一样的。他们同时都给边框加了颜色，但是由于我们td和th默认有一个默认的颜色，而我们这里没有给他们添加样式去覆盖默认的黑色线条，而导致了火狐中出现的情况，其实这个情况在谷歌中也有，只是不明显，其解析的黑色默认线条被我们的颜色盖在了上面，你如果仔细查看还是会发现有黑色边条出现，这个时候我们只需要给th和td加上颜色样式即可

 table tr th, table tr td { border-color:#b6ff00; }

 如图↓

6.jpg

七、从上面，仔细看，其实还是会发现不对劲，谷歌似乎外边框更深了，这其实还是因为，我们一开始在table上面加了border=1的原因，因为本身就给table加了一个默认的黑色线条样式，就是我们上面说的，th和td以及table都有默认的黑色边线，因此如果需要彻底解决这个问题，让边框可以正常显示，应该这么写：

        table,table tr th, table tr td { border:1px solid #0094ff; }        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}           
        
内容内容内容内容内容
        
内容内容内容内容内容
        
内容内容内容内容内容
        
内容内容内容内容内容

总结一下：

Html中table的属性：

border= “1”：给整个表格（包括表格及每一个单元格）加上1像素的黑色边框，其等同于css中的： table,table tr th, table tr td { border:1px solid #0094ff; }

cellpadding=“0”：单元格边距等于0，其默认值为1px，其等同于css中的：{padding：0;}

cellspacing=”0″：单元格间距等于0，其默认值为2px，其等同于css中的：border-collapse: collapse（边框合并），但又不完全相同，cellspacing仅间距，而border-collapse使临近的边线合并成一条边线，也就避免了cellspacing中边线重合造成边线加粗的问题。所以在这里不提倡使用html属性设置表格边框时将cellspacing设置为0，，如果你希望他等于0，更提倡使用css样式属性的方法去设置表格的边框，并使用border-collapse: collapse去合并边线，而不是将cellspacing设置为0，造成重合边线加粗的问题。

以上就是html如何给table表单加边框的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547099.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月21日 18:49:56
下一篇 2025年12月21日 18:50:31

相关推荐

  • sublime的snippet(代码片段)怎么用_sublime代码片段创建与调用技巧

    sublime的snippet(代码片段)怎么用_sublime代码片段创建与调用技巧sublime的snippet(代码片段)怎么用_sublime代码片段创建与调用技巧sublime的snippet(代码片段)怎么用_sublime代码片段创建与调用技巧sublime的snippet(代码片段)怎么用_sublime代码片段创建与调用技巧

    输入触发词按Tab可快速插入代码。通过Tools > Developer > New Snippet创建，设置content、tabTrigger和scope，保存至Packages/User目录，使用$1、$2等定义光标位，支持多行与变量如文件名、选中内容，适用于JS等特定语言环境。 …

    程序猿的头像 程序猿
    2026年9月24日 • 用户投稿
    000

  • sublime怎么配置React开发环境_sublime搭建React开发环境步骤

    sublime怎么配置React开发环境_sublime搭建React开发环境步骤sublime怎么配置React开发环境_sublime搭建React开发环境步骤sublime怎么配置React开发环境_sublime搭建React开发环境步骤sublime怎么配置React开发环境_sublime搭建React开发环境步骤

    首先安装Package Control，再通过它安装Babel、Emmet、SublimeLinter等插件；接着将.js/.jsx文件语法设为JavaScript (Babel)以支持JSX高亮；然后配置ESLint实现代码检查；最后可选配置构建系统运行npm start命令。 要在 Sublim…

    程序猿的头像 程序猿
    2026年9月24日 • 用户投稿
    000
  • google浏览器怎么把网页保存为PDF_google浏览器网页保存为PDF方法 用户投稿

    google浏览器怎么把网页保存为PDF_google浏览器网页保存为PDF方法

    使用Chrome将网页保存为PDF，首先按Ctrl+P进入打印界面，选择“另存为PDF”并调整设置后保存；也可通过F12打开开发者工具，截取指定元素或完整页面截图后转为PDF；还可安装“Save as PDF”等扩展程序实现更高质量的导出。 如果您希望将当前浏览的网页完整保存以便离线查看或分享，Go…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • PHP实时输出如何防止XSS攻击_PHP实时输出安全防范XSS攻击 用户投稿

    PHP实时输出如何防止XSS攻击_PHP实时输出安全防范XSS攻击

    防止XSS攻击需坚持三重防护：首先对用户输入进行严格验证与白名单过滤，使用filter_var等函数校验数据格式；其次根据输出上下文进行恰当转义——HTML正文和属性用htmlspecialchars()，JavaScript变量用json_encode()，URL参数用urlencode()；最后…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • Laravel 表单多动作处理：区分同一路由下的提交操作 用户投稿

    Laravel 表单多动作处理：区分同一路由下的提交操作

    本教程将详细介绍如何在 laravel 应用中，通过一个 html 表单的多个提交按钮触发不同的后端操作，而无需为每个操作创建单独的表单或路由。核心方法是为提交按钮添加 `name` 和 `value` 属性，然后在控制器中根据这些属性的值来判断执行哪种业务逻辑，从而实现如更新用户角色和删除用户等多…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • Symfony路由如何定义_Symfony框架路由定义定义方法详解 用户投稿

    Symfony路由如何定义_Symfony框架路由定义定义方法详解

    答案：Symfony中路由通过URL映射控制器，支持注解、YAML、XML和PHP数组定义方式。注解适合快速开发，YAML便于团队维护，路由可设置默认值、正则约束和HTTP方法限制，确保安全与灵活。 在Symfony框架中，路由是将URL映射到控制器的关键机制。通过定义清晰的路由规则，你可以让应用响…

    程序猿的头像 程序猿
    2026年9月24日
    400
  • Laravel 表单验证失败后保留输入值：最佳实践教程 用户投稿

    Laravel 表单验证失败后保留输入值：最佳实践教程

    本文旨在帮助 Laravel 开发者解决表单验证失败后，如何保留用户已输入数据的问题。我们将深入探讨 withInput() 方法的使用，并提供清晰的代码示例，确保即使在验证失败的情况下，用户体验也能保持流畅。通过本文的学习，你将掌握在 Laravel 中优雅地处理表单验证，并提升应用的可用性。 在…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • 动态表单输入中多答案数据处理教程 用户投稿

    动态表单输入中多答案数据处理教程

    本教程旨在解决Web开发中，如何高效处理包含动态数量答案的表单提交数据，特别是当需要更新现有问题及其关联答案时。文章将详细阐述前端表单的命名策略以及后端PHP如何解析这些动态输入，以准确获取答案内容及其对应的数据库ID，从而实现数据的精准更新，并提供最佳实践建议。 理解动态答案更新的挑战 在构建问答…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • 使用 PHP 解析 JSON 文件并在网页上显示特定数据 用户投稿

    使用 PHP 解析 JSON 文件并在网页上显示特定数据

    本文旨在帮助开发者学习如何使用 PHP 解析 JSON 文件，并提取其中的特定数据，将其以结构化的方式展示在网页上。我们将通过一个简单的示例，演示如何读取 JSON 数据，解析成 PHP 数组，并最终以 HTML 表格的形式呈现。 PHP 解析 JSON 数据 JSON (JavaScript Ob…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • 如何在PHP的require语句中传递参数并有效管理变量作用域 用户投稿

    如何在PHP的require语句中传递参数并有效管理变量作用域

    本文探讨了在php中使用`require`或`include`语句时如何向被引入文件传递参数。文章详细阐述了通过直接变量作用域共享、利用`$_get`超全局变量（不推荐）以及将引入文件内容封装为函数或类（推荐最佳实践）这三种方法，并提供了相应的代码示例，旨在帮助开发者理解和选择最适合其场景的参数传递…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • PHP Web开发：高效处理动态数量问题答案的表单更新与ID获取 用户投稿

    PHP Web开发：高效处理动态数量问题答案的表单更新与ID获取

    本教程探讨在PHP Web开发中，如何高效处理具有动态数量答案的问题更新表单。针对需要同时获取答案文本值及其对应ID的场景，文章详细介绍了通过合理设计表单字段命名和利用$_POST超全局变量的键值迭代特性，实现对动态生成答案字段的准确解析和数据提取，确保更新操作的完整性。 问题背景与挑战 在开发问答…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • phpMyAdmin快速导出文件字符集配置指南 用户投稿

    phpMyAdmin快速导出文件字符集配置指南

    本文详细介绍了phpMyAdmin快速导出功能中文件字符集的默认设置及其配置方法。默认情况下，快速导出生成的文件采用UTF-8编码。用户可以通过修改phpMyAdmin的配置文件config.inc.php，利用$cfg[‘Export’][‘charset&#8…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • Laravel Blade中条件隐藏元素的优雅实践 用户投稿

    Laravel Blade中条件隐藏元素的优雅实践

    本文探讨了在Laravel Blade模板中如何高效地实现HTML元素的条件隐藏。针对传统@if-@else语句导致代码冗余的问题，教程提出使用Blade的内联三元运算符在style属性中动态控制display: none，从而避免重复代码，提升模板的可读性和维护性。此外，还将介绍如何利用CSS类和…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • PHP同页面无限次表单提交与显示：防止数据覆盖的实现技巧 用户投稿

    PHP同页面无限次表单提交与显示：防止数据覆盖的实现技巧

    本教程详细阐述了如何在php中实现同页面多次表单提交而不覆盖先前数据的方法。核心策略是利用html的数组命名输入（`name=”field[]”`）来收集多个值，并在每次页面刷新时，通过隐藏输入字段重新提交已有的数据，从而在不依赖数据库的情况下，实现“无限”次提交并显示所有历…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • 使用 Dompdf 一键生成大量 PDF 文件的优化方案 用户投稿

    使用 Dompdf 一键生成大量 PDF 文件的优化方案

    本文旨在解决使用 Dompdf 生成大量 PDF 文件时遇到的超时问题。通过分析常见原因，提出了从Web服务器环境迁移到命令行环境，并配合 set_time_limit(0) 函数来避免执行超时，从而高效生成多个包含大量数据的 PDF 文件。 问题分析 从提供的代码片段可以看出，程序通过循环遍历 $…

    程序猿的头像 程序猿
    2026年9月23日
    700
  • PHP如何设置视频自动播放_PHP设置视频自动播放方法 用户投稿

    PHP如何设置视频自动播放_PHP设置视频自动播放方法

    答案：PHP通过生成含autoplay和muted属性的HTML5 video标签实现视频自动播放。具体描述：PHP动态输出视频路径与播放设置，结合autoplay、muted、controls等属性，在浏览器限制下提升自动播放成功率，尤其用于背景视频循环播放场景。 PHP 本身是服务器端语言，不能…

    程序猿的头像 程序猿
    2026年9月23日
    2200
  • 在PHP中将JSON数组值声明为变量 用户投稿

    在PHP中将JSON数组值声明为变量

    本文介绍了如何在PHP中从数据库获取数据并将其编码为JSON数组，然后通过AJAX调用将其传递到另一个页面。重点讲解了如何在接收数据的页面中解析JSON数据，并将JSON数组中的特定值提取为PHP变量，以便在后续的函数或查询中使用。 从数据库获取数据并编码为JSON 首先，我们需要从数据库中获取数据…

    程序猿的头像 程序猿
    2026年9月23日
    1200
  • win11怎么设置默认浏览器_win11默认浏览器设置教程 用户投稿

    win11怎么设置默认浏览器_win11默认浏览器设置教程

    首先通过“设置”应用批量更改默认浏览器，选择目标浏览器后系统自动关联所有网页协议；其次可利用浏览器内置功能跳转至系统设置完成授权；最后为确保万无一失，可手动逐项指定http、https等协议的默认应用。 如果您希望在Windows 11系统中更改默认浏览器，以便所有网页链接都能通过您选择的浏览器打开…

    程序猿的头像 程序猿
    2026年9月23日
    1200
  • 使用 Dompdf 高效生成大量 PDF：优化长时任务与超时处理 用户投稿

    使用 Dompdf 高效生成大量 PDF：优化长时任务与超时处理

    本文探讨了在使用 Dompdf 生成大量或多页 PDF 文件时遇到的超时问题。针对Web环境下的限制，文章提出了两种解决方案：短期内可通过调整PHP执行时间限制来缓解，但更推荐采用PHP命令行接口（CLI）进行后台处理。通过将耗时任务转移到独立的CLI脚本中执行，可以有效避免Web服务器超时，提升P…

    程序猿的头像 程序猿
    2026年9月23日
    200
  • 使用 PHP 解析 JSON 文件并在网页中显示特定数据 用户投稿

    使用 PHP 解析 JSON 文件并在网页中显示特定数据

    本文档旨在指导初学者如何使用 PHP 解析 JSON 文件，并提取其中的特定数据，最终将其展示在网页上。我们将通过一个简单的例子，演示如何读取 JSON 文件，解码 JSON 数据，并使用 PHP 的数组操作和 HTML 元素将数据呈现出来。 读取 JSON 文件并解码 首先，我们需要准备一个 JS…

    程序猿的头像 程序猿
    2026年9月23日
    100

发表回复

登录后才能评论
关注微信