Categories
CSS & HTML Tips

HTML Table Size – Control and Change the Size of Table and Table Cells

In HTML 4.01, you can directly change the size of table via HTML properties width and height instead of controlling them by CSS styles.

Table Size

The overall size of a table is determined by the width and height of it.

For example, to set table width as 400 pixels and table height as 150 pixels:

<table width="400" height="150">
...
</table>

You can also specify a percentage for the table to be adjusted proportionately to the width or height of its container. For example, setting a width of 50% to this table will result in it being always half the width of the page while maintaining a height of 150px:

<body>
	<table width="50%" height="150">
	...
	</table>
</body>

You can apply the same value to height as well, which depending on the container, may or may not work.

Cell Size

HTML table cells are denoted by td tag which can be controlled in size by the same approach – the width and height attributes:

<table width="100%">
	<tr>
		<td width="325">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td height="113" width="325"></td>
		<td height="113"></td>
		<td height="113"></td>
	</tr>
	<tr>
		<td width="325">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
The CSS way

In the era of XHTML, you have to do all styling and presentational decoration in the CSS way, width and height attributes on table and td are simply unacceptable. The applauded approach is to have the style attribute wherever it needs additional styling such as changing the size of HTML table or table cell:

<table style="width: 400px; height: 150px;">
...
	<tr>
	...
		<td  style="width: 325px; height: 113px;"></td>
	</tr>
</table>

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.