View video tutorial
HTML Table Sizes
HTML
An HTML <table> can have different sizes in width or height.
HTML Table size
➔ style attribute is used to set the size of cells, columns, rows, or table itself.
➔ To get full window width and 250px height of a table, style should be like this style = "width:100%; height:250px;"
➔ CSS style can be applied to every individual parts of a table like, <td>, <th>, <tr> etc.
Syntax
<!--CSS-->
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
</style>
<!--HTML-->
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pelé</td>
<td>Forward</td>
<td>Brazil</td>
</tr>
</tbody>
</table>
Players Table
| Player Name | Position | Country |
|---|---|---|
| Pelé | Forward | Brazil |
| Diego Maradona | Attacking Midfielder | Argentina |
| Lionel Messi | Forward/Attacking Midfielder | Argentina |
| Cristiano Ronaldo | Forward | Portugal |
| Zinedine Zidane | Attacking Midfielder | France |
| Franz Beckenbauer | Defender | Germany |
| David Beckham | Midfielder | UK |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Soccer Players</h2>
<table class="table1">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pelé</td>
<td>Forward</td>
<td>Brazil</td>
</tr>
<tr>
<td>Diego Maradona</td>
<td>Attacking Midfielder</td>
<td>Argentina</td>
</tr>
<tr>
<td>Lionel Messi</td>
<td>Forward/Attacking Midfielder</td>
<td>Argentina</td>
</tr>
<tr>
<td>Cristiano Ronaldo</td>
<td>Forward</td>
<td>Portugal</td>
</tr>
<tr>
<td>Zinedine Zidane</td>
<td>Attacking Midfielder</td>
<td>France</td>
</tr>
<tr>
<td>Franz Beckenbauer</td>
<td>Defender</td>
<td>Germany</td>
</tr>
<tr>
<td>David Beckham</td>
<td>Midfielder</td>
<td>UK</td>
</tr>
</tbody>
</table>
</body>
</html>
Click on the "See output" button to see how it works.