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 >w3wiki</ 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:
HTML Table Sizes
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 of Content
- Table Width
- Table Column Width
- Table Row Height