HTML Table Sizes
HTML tables can have different sizes for each column, each row, or the whole table. Use the style attribute with the width or height properties to set the size of a table, row, or column.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element.
Note: A width given as a percentage is relative to the parent element, which here is the <body>.
Example
A table set to 100% width.
Prompt
A table set to 100% width using the style attribute on the table element, with header row Firstname/Lastname/Age and two data rows (Jill Smith 50, Eve Jackson 94).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Width</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
HTML Table Column Width
To set the width of a single column, add the style attribute to a <th> or <td> in that column.
Example
The first column set to 70% width.
Prompt
A 100%-width table where the first column is set to 70% width using the style attribute on the first th, with the same Firstname/Lastname/Age data.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Width</title>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
HTML Table Row Height
To set the height of a single row, add the style attribute to that <tr> element.
Example
The second row set to 200 pixels tall.
Prompt
A 100%-width table where the second row is set to 200 pixels tall using the style attribute on that tr, with the same Firstname/Lastname/Age data.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Row Height</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>