How to Set Table Cell Width & Height in HTML ?
In HTML, we can control the width and height of table cells using various approaches. This article discusses different methods to set the width and height of table cells in HTML.
Table of Content
- Using inline Style
- Using width and height attributes
Using Inline Style
In this approach, we are using the inline style to set the width and height of table cells. We can set the width and height of table cells directly within the <td> or <th> tags using the style attribute.
Example: In the below example we are using inline styling to set table cell width and height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Table Cell Width and Height</title>
</head>
<body>
<h1 style="color: green;">w3wiki</h1>
<h3>
Set width and height of table cell
using Inline Styling
</h3>
<table border="1">
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td style="width: 100px; height: 50px;">
Cell 1 with 100px width
</td>
<td style="width: 200px; height: 50px;">
Cell 2 with 200px width
</td>
</tr>
</table>
</body>
</html>
Output:
Using Width and Height Attributes
In this approach, we are directly adding the width and height attributes to the <td> or <th> tags with the desired values.
Example: The below example uses width and height attributes to set table cells width and height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Table Cell Width and Height</title>
</head>
<body>
<h1 style="color: green;">w3wiki</h1>
<h3>
Set width and height of table cell using
width and height attribute
</h3>
<table border="1">
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td width="100" height="50">Cell 1</td>
<td width="150" height="50">Cell 2</td>
</tr>
</table>
</body>
</html>
Output: