HTML TUTORIALS-
HTML Table Sizes Tag –
Introduction-
HTML Table Sizes Tag -
- When user or coder working with HTML tables, controlling the size of the table and its elements (like rows, columns, and cells) is essential for layout and design. Here's a breakdown of how you can manage HTML table sizes follow this examples code:-
-)📋 1. Default Table Size:-HTML table will automatically adjust its size based on its content. That means if the text or image inside a table cell is wide, the column will expand to fit the content.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Pooja</td>
<td>30</td>
</tr>
</table>
| Name | Age |
|---|---|
| Pooja | 30 |
<table width="700" height="200" border="1"> ... </table>
<table border="1">
<colgroup>
<col style="width: 70%;">
<col style="width: 30%;">
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Pooja</td>
<td>30</td>
</tr>
<tr>
<td>Sonali</td>
<td>30</td>
</tr>
</table>
| Name | Age |
|---|---|
| Pooja | 30 | Sonali | 30 |
<!DOCTYPE html>
<html>
<head>
<style>
table {
table-layout: fixed;
width: 500px;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<h2>Fixed Layout Table</h2>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Pooja shinde</td>
<td>Pooja@learntosap.com.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>Pramod Behera</td>
<td>pramod@learntosap.com</td>
<td>098-765-4321</td>
</tr>
</table>
</body>
</html>
| Name | Phone | |
|---|---|---|
| Pooja shinde | Pooja@learntosap.com | 123-456-7890 |
| Pramod Behera | pramod@learntosap.com | 098-765-4321 |