HTML Table Sizes
Last Updated :
19 Jan, 2024
HTML Table Sizes can be specified with different dimensions, either individually for each column or row or collectively for the entire table. HTML table sizes easily can be with attributes like width, height, and style for a clean and organized layout.
Table Width
To set the size of the entire HTML table, you can use the style attribute with the width property. The width of the entire table is set to 50% using the style attribute within the <table> tag.
Example: Implementation to set HTML Table Sizes using width 100%.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>HTML Table size</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #7a3f3f;
padding: 10px;
text-align: center;
}
th {
background-color: rgb(191, 248, 191);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The TH element defines
table headers.
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Table Column Width
To Set the size of a specific column in an HTML table, use the width property within the <th> element. Set a width to 50% to a particular column.
Example: Implementation to show how to set HTML Table Sizes using width 50% to the <th>.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>HTML Table size</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #7a3f3f;
padding: 10px;
text-align: center;
}
th {
background-color: rgb(191, 248, 191);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Setting the size to a
particular column <th>
or <td>.
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th style="width: 50%;">
Roll No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Table Row Height
To Set the size of a specific row in an HTML table, use the height property within the <tr> element. Assign height of 100px to a particular row.
Example: The example shows how to set HTML Table Sizes for a particular row using height 100px.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>HTML Table size</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #7a3f3f;
padding: 10px;
text-align: center;
}
th {
background-color: rgb(191, 248, 191);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Setting the size to a
particular row <tr>.
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>
Roll No
</th>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...