HTML怎么设置table宽度

ID:9673 / 打印
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="max-width:90%"> 	<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 td什么意思
下一篇: html怎么实现进度条

作者:admin @ 24资源网   2024-09-27

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。