Html set column widths in table

How to Set the Width of the Table Column

If you want to set the width of the table column, you can use some CSS. You need to use the width property.

Example of the setting the width of the table column:

html> html> head> title>Title of the document title> style> table < width: 100%; > td:first-child < background-color: #32a852; > td:nth-child(2) < background-color: #aaaaaa; > td:last-child < background-color: #5696c7; > style> head> body> table> colgroup> col span="1" style="width: 20%;"> col span="1" style="width: 50%;"> col span="1" style="width: 30%;"> colgroup> tbody> tr> td>20% td> td>50% td> td>30% td> tr> tbody> table> body> html>

Result

How to expand the last column in the table without expanding the table?

To expand the width of the last column in the table without changing the width of the entire table, you can set the width property of the last column using a percentage value that is larger than the current width.

html> html> head> title>Title of the document title> style> table < width: 100%; > td:first-child < background-color: #32a852; > td:nth-child(2) < background-color: #aaaaaa; > td:last-child < background-color: #5696c7; width: 60%; /* set width of last column to 60% */ > style> head> body> table> colgroup> col span="1" /> col span="1" /> col span="1" /> colgroup> tbody> tr> td>A td> td>C td> td>C td> tr> tbody> table> body> html>

Источник

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

Example

Set the width of the table to 100%:

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.

HTML Table Column Width

Example

Set the width of the first column to 70%:

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Create HTML Table With Different Column Sizes

1. Set Size of HTML Table Columns
2. Set Table Columns Width Using In-Line CSS
3. 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 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%">IDth>  th width="70%">Nameth>  th width="15%">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

The above HTML code uses the width property inside the 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.

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 , 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%">IDth>  th style="width:40%">First Nameth>  th style="width:40%">Last Nameth>  th style="width:10%">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>Doetd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>Willtd>  td>40td>  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 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">IDth>  th class="name">Nameth>  th class="age">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  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>IDth>  th>Nameth>  th>Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  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 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.

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>IDth>  th>Nameth>  th>Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Источник

How to Set the Width of the Table Column

If you want to set the width of the table column, you can use some CSS. You need to use the width property.

Example of the setting the width of the table column:

html> html> head> title>Title of the document title> style> table < width: 100%; > td:first-child < background-color: #32a852; > td:nth-child(2) < background-color: #aaaaaa; > td:last-child < background-color: #5696c7; > style> head> body> table> colgroup> col span="1" style="width: 20%;"> col span="1" style="width: 50%;"> col span="1" style="width: 30%;"> colgroup> tbody> tr> td>20% td> td>50% td> td>30% td> tr> tbody> table> body> html>

Result

How to expand the last column in the table without expanding the table?

To expand the width of the last column in the table without changing the width of the entire table, you can set the width property of the last column using a percentage value that is larger than the current width.

html> html> head> title>Title of the document title> style> table < width: 100%; > td:first-child < background-color: #32a852; > td:nth-child(2) < background-color: #aaaaaa; > td:last-child < background-color: #5696c7; width: 60%; /* set width of last column to 60% */ > style> head> body> table> colgroup> col span="1" /> col span="1" /> col span="1" /> colgroup> tbody> tr> td>A td> td>C td> td>C td> tr> tbody> table> body> html>

Источник