HTML5教程-表格宽度设置，最大宽度，自动宽度

news2025/1/4 19:55:50

HTML表格宽度

参考：html table width

HTML表格是网页设计中常用的元素之一，可以用来展示数据、创建布局等。表格的宽度是一个重要的参数，可以通过不同的方式来设置表格的宽度，本文将详细介绍HTML表格宽度的不同设置方式和示例代码。

1. 设置表格宽度为固定值

可以通过width属性来设置表格的宽度为固定值。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>固定表格宽度示例</title>
</head>
<body>
    <table border="1" width="400">
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
        </tr>
    </table>
</body>
</html>

Output:

2. 设置表格宽度为百分比

除了固定值，还可以通过百分比来设置表格的宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>百分比表格宽度示例</title>
</head>
<body>
    <table border="1" width="50%">
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
        </tr>
    </table>
</body>
</html>

Output:

3. 根据内容自适应宽度

如果不指定表格的宽度，表格的宽度会根据内容自动调整。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>自适应宽度表格示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
        </tr>
    </table>
</body>
</html>

Output:

4. 设置表格列宽

除了设置整个表格的宽度，还可以设置表格的每一列的宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>设置表格列宽示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <td width="100">how2html.com</td>
            <td width="200">示例</td>
        </tr>
        <tr>
            <td width="200">示例</td>
            <td width="100">how2html.com</td>
        </tr>
    </table>
</body>
</html>

Output:

5. 使用CSS设置表格宽度

除了在HTML中直接设置表格的宽度，还可以使用CSS来设置表格的样式，包括宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CSS设置表格宽度示例</title>
    <style>
        table {
            width: 80%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

6. 设置表格的最大宽度

有时候我们需要限制表格的最大宽度，可以使用max-width属性来设置。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>最大宽度表格示例</title>
    <style>
        table {
            max-width: 500px;
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

7. 使用混合方式设置表格宽度

可以使用混合方式来设置表格的宽度，例如固定宽度和百分比结合使用。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>混合方式表格宽度示例</title>
    <style>
        table {
            width: 80%;
            max-width: 600px;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

8. 表格自适应屏幕宽度

可以通过设置表格的宽度为100%来使表格自适应屏幕宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表格自适应屏幕宽度示例</title>
    <style>
        table {
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

9. 设置单元格宽度

除了设置表格和列的宽度，还可以设置单个单元格的宽度。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>单元格宽度示例</title>
    <style>
        table {
            width: 80%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
        .custom-width {
            width: 200px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td class="custom-width">示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

10. 表格宽度调整为自适应最大宽度

在表格内容超出指定宽度时，可以自动调整表格的宽度，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>自适应最大宽度示例</title>
    <style>
        table {
            table-layout: auto;
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>长内容列1</th>
            <th>长内容列2</th>
            <th>长内容列3</th>
        </tr>
        <tr>
            <td>how2html.com</td>
            <td>示例示例示例示例示例示例</td>
            <td>123</td>
        </tr>
        <tr>
            <td>示例示例示例示例示例示例</td>
            <td>how2html.com</td>
            <td>456</td>
        </tr>
    </table>
</body>
</html>

Output:

参考链接：

  • QQDocs html table width
  • Yuque html table width
  • Nowcoder html table width
  • Kdocs html table width
  • 51CTO html table width
  • Gitee html table width
  • Developer Weixin html table width
  • Leetcode html table width

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2257364.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2024年12月9日Github流行趋势

2024年12月9日Github流行趋势

项目名称&#xff1a;ollama / ollama 项目维护者&#xff1a;mxyng, jmorganca, dhiltgen, BruceMacD, technovangelist等项目介绍&#xff1a;快速上手使用Llama 3.2、Mistral、Gemma 2及其他大型语言模型。项目star数&#xff1a;101,591项目fork数&#xff1a;8,117 项目名…
阅读更多...
IntelliJ+SpringBoot项目实战（29）--如何将Beetl的模板文件放在独立的文件目录

IntelliJ+SpringBoot项目实战（29）--如何将Beetl的模板文件放在独立的文件目录

在实际的项目开发中&#xff0c;为了方便前端人员调试页面&#xff0c;所以有必要将Beetl的模板文件放在独立的目录下&#xff0c;方便前端人员维护&#xff0c;而不是打包到项目的jar包中&#xff0c;如果打包到项目的jar包中还有另外的问题&#xff0c;就是一改动页面就要重新…
阅读更多...
在Ubuntu上使用IntelliJ IDEA：开启你的Java开发之旅！

在Ubuntu上使用IntelliJ IDEA：开启你的Java开发之旅！

你好&#xff0c;年轻的学徒&#xff01;&#x1f9d1;‍&#x1f4bb; 是时候踏上进入Java开发世界的史诗之旅了&#xff0c;我们的得力助手将是强大的IntelliJ IDEA。准备好了吗&#xff1f;出发吧&#xff01; 在我们开始之前&#xff0c;我们需要下载这个工具。但是&#…
阅读更多...
GWAS分析先做后学

GWAS分析先做后学

大家好&#xff0c;我是邓飞。 GWAS分析是生物信息和统计学的交叉学科&#xff0c;上可以学习编程&#xff0c;下可以学习统计。对于Linux系统&#xff0c;R语言&#xff0c;作图&#xff0c;统计学&#xff0c;机器学习等方向&#xff0c;都是一个极好的入门项目。生物信息如…
阅读更多...
LeetCode—189. 轮转数组（中等）

LeetCode—189. 轮转数组（中等）

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例1&#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3输出:[5,6,7,1,2,3,4] 解释: 向右轮转 1 步:[7,1,2,3,4,5,6] 向右轮转 2 步:[6,7,1,2,3,4,5] 向…
阅读更多...
ModelScope-Agent(1): 基于开源大语言模型的可定制Agent系统

ModelScope-Agent(1): 基于开源大语言模型的可定制Agent系统

目录 简介快速入门 简介 github地址 快速入门 看前两篇&#xff0c;调用千问API和天气API # 选用RolePlay 配置agent from modelscope_agent.agents.role_play import RolePlay # NOQArole_template 你扮演一个天气预报助手&#xff0c;你需要查询相应地区的天气&#x…
阅读更多...
go语言的成神之路-标准库篇-fmt标准库

go语言的成神之路-标准库篇-fmt标准库

目录 一、三种类型的输出 print&#xff1a; println&#xff1a; printf&#xff1a; 总结&#xff1a; 代码展示&#xff1a; 二、格式化占位符 %s&#xff1a;用于格式化字符串。 %d&#xff1a;用于格式化整数。 %f&#xff1a;用于格式化浮点数。 %v&#xff1…
阅读更多...
pyenv 安装脚本解读

pyenv 安装脚本解读

pyenv 安装脚本 curl https://pyenv.run | bash执行上面这一行脚本就可以安装pyenv来满足你对 Python 多版本共存以及切换的支持。 pyenv搭配virtualenv可以满足你对Python虚拟环境版本的支持。个人感觉pyenv比conda更轻量&#xff0c;更推荐使用。 那么上面的脚本到底干了什…
阅读更多...
OpenAI 12Days 第二天 强化微调（RFT）：推动语言模型在科学研究中的应用

OpenAI 12Days 第二天 强化微调（RFT）：推动语言模型在科学研究中的应用

OpenAI 12Days 第二天 强化微调&#xff08;RFT&#xff09;&#xff1a;推动语言模型在科学研究中的应用 文章目录 OpenAI 12Days 第二天 强化微调&#xff08;RFT&#xff09;&#xff1a;推动语言模型在科学研究中的应用RFT的工作原理与应用领域案例研究&#xff1a;基因突变…
阅读更多...
柯桥职场商务英语生活英语口语培训外贸纺织口语学习

柯桥职场商务英语生活英语口语培训外贸纺织口语学习

"等一下"该怎么说&#xff1f; 大家应该都知道&#xff0c;wait a moment是一个祈使句&#xff0c;祈使句就难免带有命令的口吻&#xff0c;还有点不耐烦。 如果你把“等一下”说成wait a moment&#xff0c;外国人多半认为你是个傲慢无礼的人。毕竟在他们看来wait a…
阅读更多...
嵌入式蓝桥杯学习7 产生PWM

嵌入式蓝桥杯学习7 产生PWM

Cubemx配置 打开cubemx&#xff0c;前面的配置看上文&#xff0c;这里主要配置定时器产生PWM波。 以PA1的TIM2-CH2通道为例进行演示。 1.在Timers中打开TIM2,将Channel2配置为PWM Generation CH2。 2.将Clock Source 选择为Internal Clock。 3.配置Paramater Settings中的参…
阅读更多...
SQL Server中SELECT (Transact-SQL)语法定义和解释

SQL Server中SELECT (Transact-SQL)语法定义和解释

语法定义&#xff1a; <SELECT statement> ::[ WITH { [ XMLNAMESPACES , ] [ <common_table_expression> [ , ...n ] ] } ]<query_expression>[ ORDER BY <order_by_expression> ][ <FOR Clause> ][ OPTION ( <query_hint> [ , ...n ] )…
阅读更多...
证书监控续签工具

证书监控续签工具

详细实现方式以及代码下载请前往https://www.passerma.com/article/91 一个基于 go 的 ssl 证书监控续签工具&#xff0c;用于监控阿里云免费 ssl 证书的有效期&#xff0c;并在证书即将过期时自动续签证书 仅支持续签阿里云的免费证书 页面 使用方法 1.申请阿里云账号 2.…
阅读更多...
【开源】A063—基于Spring Boot的农产品直卖平台的设计与实现

【开源】A063—基于Spring Boot的农产品直卖平台的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…
阅读更多...
HDR视频技术之六：色调映射

HDR视频技术之六：色调映射

图像显示技术的最终目的就是使得显示的图像效果尽量接近人们在自然界中观察到的对应的场景。 HDR 图像与视频有着更高的亮度、更深的位深、更广的色域&#xff0c;因此它无法在常见的普通显示器上显示。 入门级的显示器与播放设备&#xff08;例如普通人家使用的电视&#xff0…
阅读更多...
【C++笔记】map和set的使用

【C++笔记】map和set的使用

前言 各位读者朋友们大家好&#xff01;上期我们讲完了二叉搜索树这一数据结构&#xff0c;这一期我们来讲STL中的map和set这两大容器。这两个容器的底层是红黑树&#xff0c;红黑树的底层是平衡二叉搜索树。 目录 前言一. 序列式容器和关联式容器二. set系列的使用2.1 set类…
阅读更多...
DevOps持续集成

DevOps持续集成

DevOps流程 第一步安装git 关闭防火墙 systemctl stop firewalld cd /usr/loacl vim docker-compose.yml docker search gitlab 拉取gitlab镜像 2.33GB docker pull gitlab/gitlab-ce:latestvim docker-compose.yml修改docker-compose.yml version: 3.1 services:gitlab:i…
阅读更多...
TCP的“可靠性”（上）

TCP的“可靠性”（上）

目录 TCP的“可靠性”&#xff08;上&#xff09;确认应答&#xff08;可靠性传输的基础&#xff09;超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09; TCP的“可靠性”&#xff08;上&#xff09; 想必大家都或多或少的听说过TCP的特性&#xff1a;有连…
阅读更多...
【C++】求第二大的数详细解析

【C++】求第二大的数详细解析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述&#x1f4af;输入描述&#x1f4af;解题思路分析1. 题目核心要求2. 代码实现与解析3. 核心逻辑逐步解析定义并初始化变量遍历并处理输入数据更新最大值与次大值输…
阅读更多...
Linux图形化工具推荐

Linux图形化工具推荐

1、MobaXterm MobaXterm Xserver with SSH, telnet, RDP, VNC and X11 - DownloadFree X server for Windows with tabbed SSH terminal, telnet, RDP, VNC and X11-forwarding - Downloadhttps://mobaxterm.mobatek.net/download.html 2、FinalShell FinalShell SSH工具,服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023