社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > html教程 > HTML怎么设置table宽度

HTML怎么设置table宽度

青灯夜游
发布： 2021-05-17 15:49:52
原创
16947 人浏览过

HTML设置table宽度的方法：1、直接使用table标签的width属性，语法“

”；2、在table标签中使用style属性，添加“width:宽度值;”样式。

HTML怎么设置table宽度

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

给table标签使用border属性添加边框后，默认宽度有里面的内容决定：

<table border="1">
			<tr>
				<td>商品</td>
				<td>价格</td>
			</tr>
			<tr>
				<td>T恤</td>
				<td>￥100</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>￥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>￥150</td>
			</tr>
		</table>
登录后复制

效果图：

1.png

那么怎么设置table宽度？

方法1：使用table标签的width属性

<table border="1" width="200">
	<tr>
		<td>商品</td>
		<td>价格</td>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table>
登录后复制

效果图：

2.png

方法2：使用style属性，添加“width:宽度值;”样式

<table border="1" style="width: 250px;">
	<tr>
		<td>商品</td>
		<td>价格</td>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table>
登录后复制

效果图：

3.png

（学习视频分享：css视频教程、《html视频教程》）

以上是HTML怎么设置table宽度的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
html table 宽度
上一篇：html怎么实现进度条 下一篇：html td什么意思
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
输入<html><>后是怎么变成<html></html>的
来自于 1970-01-01 08:00:00
0
0
0
angular.js - 有谁知道吗用ng-bind-html绑定html。但是html却被转义了
来自于 1970-01-01 08:00:00
0
0
0
HTML与HTML5的区别
来自于 1970-01-01 08:00:00
0
0
0
HTML总结
来自于 1970-01-01 08:00:00
0
0
0
HTML总结
来自于 1970-01-01 08:00:00
0
0
0
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板