How to set table width in HTML

How to set the table width in HTML: 1. Directly use the width attribute of the table tag, with the syntax "

"; 2. Use the style attribute in the table tag and add "width :width value;" style.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

After adding a border to the table tag using the border attribute, the default width is determined by the content inside:

<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>

Rendering:

Then How to set table width?

Method 1: Use the width attribute of the table tag

<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>

Rendering:

Method 2: Use the style attribute to add the "width: width value;" style

<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>

Rendering:

（ Learning video sharing: css video tutorial, "html video tutorial")

The above is the detailed content of How to set table width in HTML. For more information, please follow other related articles on the PHP Chinese website!