How to Create HTML Table With Different Column Sizes
- Set Size of HTML Table Columns
- Set Table Columns Width Using In-Line CSS
- Set Table Columns Width Using Internal CSS
This article explains modifying the column’s width in HTML and CSS to meet our specifications. Because HTML5 deprecated various tags and properties, we will cover some alternate strategies for attaining the required functionality.
This tutorial will cover how to customize HTML tables using in-line and internal CSS.
Set Size of HTML Table Columns
We frequently need to develop tables with several columns and rows for our web pages. Sometimes we need different widths for each column of the HTML table.
Let’s see how we can create a table having columns with different widths. Before HTML5, the table tag and its associated tags like <th> had a width property that allowed the developers to set the required width of the column.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th width="15%">ID</th>
<th width="70%">Name</th>
<th width="15%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
The above HTML code uses the width property inside the <th> tag. The table width is set to 100%.
We want the Name column wider than others. So we assign the width 70% to the Name column and 15% to the other two columns each.
Adding up all the figures 70 + 15 + 17 = 100 we get a 100 again.
You can set the table width to any percentage according to your need. This width percentage depends upon the parent tag of the <table>, which in our case is the <body> tag.
In HTML5, the width property is deprecated. HTML no longer supports deprecated attributes and tags.
This change in HTML5 encourages developers to use CSS for any styling needed. Let’s see how we can set the table and its column width using CSS.
Set Table Columns Width Using In-Line CSS
Since we cannot use the width property inside the <th>, we can still style our table using the style inside our tags, known as in-line styling. You can give a different width percentage to each column.
Check the code below to understand it clearly.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:10%">ID</th>
<th style="width:40%">First Name</th>
<th style="width:40%">Last Name</th>
<th style="width:10%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>Will</td>
<td>40</td>
</tr>
</table>
</body>
</html>
In the above code, we assign 10, 40, 40, and 10 widths in percentage to each column. Adding up these figures will make a 100.
Since we set our table width to 100%, we must divide each column in the same range.
Set Table Columns Width Using Internal CSS
We have set the column width in the above code using in-line CSS. But in-line CSS is not recommendable as we must do a lot of rewriting if we want the same functionality on multiple web page regions.
It is a professional practice to keep the HTML and CSS code separate. So let’s see how we can style our table columns using internal CSS.
Internal CSS is written inside the style tag inside the HTML head tag.
Method 1: Use a CSS Class
One of the easiest methods is to assign a class to each <th> tag and then apply styling to them in the style tag. Here’s how.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.name {
width: 70%
}
.id, .age {
width: 15%
}
</style>
</head>
<body>
<table>
<tr>
<th class="id">ID</th>
<th class="name">Name</th>
<th class="age">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Pretty simple. Right? But this method is not efficient in the case of a large number of columns.
Let’s say we have a table with 10 or 20 columns and want different widths for each. Assigning classes to each tag and styling all of them will be a hectic task.
There should be some way of doing this without giving classes to the tags and calling them directly in the style tag. Let’s see this technique in the following method.
Method 2: Use CSS Pseudo-Class Selector
Let’s look at another method to achieve our expected output using a better and more efficient code.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(2) {
width: 70%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Let’s understand what we did in the code. A CSS selector matches every parent’s nth child element.
The CSS pseudo-class selector :nth-child(n) is used to compare elements based on where they are located in a pair of siblings. The n can be any number or a keyword like, odd or even.
We select the <th> tag in the style tag and call the nth-child selector on it. The nth-chid(1) means it will select the ID column, nth-child(2) will select the Name column, and so on.
This way, you can customize the column’s width without assigning a class to each tag.
One more important point here is that if you specify the width of the ID and Age columns, there is no need to select the width percentage of the Name column as the remaining width will be assigned automatically to it, and it will give us the same result.
Check the example below.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>