- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set table width in HTML?
We use inline style attribute, to set the table width in HTML. The attribute is used within the HTML <table> tag, with the CSS property width to set table width.
Syntax
Following is the syntax to set table width in HTML.
<table style="width: width value in percentage">… </table>
Example
Following is the example program to set table width in HTML.
<!DOCTYPE html> <html> <style> table { border:1px solid black; padding: 10px; } th, td{ border:1px solid black; padding: 20px; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 50%"> <tr> <th>Name </th> <th>Job role</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
In above example we used width=50%, it will expand our table to the 50% of the browser tab size on the web page.
Example
Following is another example program to set table width in HTML.
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; } </style> </head> <body> <table style="width:100%"> <caption>Cricketers...</caption> <tr style="background-color: Mediumseagreen"> <th>S.no</th> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>1</td> <td>babar azam</td> <td>34</td> <td>pakistan</td> </tr> <tr> <td>2</td> <td>Shami</td> <td>29</td> <td>India</td> </tr> <tr style="background-color: Mediumseagreen"> <td>3</td> <td>Cummins</td> <td>33</td> <td>Australia</td> </tr> </table> </body> </html>
Now we try to extend our table to our browser tab size using style attribute.
Example
Following is the example program to extend our table to our browser tab size using style attribute.
<!DOCTYPE html> <html> <style> table { border:1px solid black; padding: 10px; } th, td{ border:1px solid black; padding: 20px; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th>Name </th> <th>Job role</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
- Related Articles
- How to set cell width and height in HTML?
- Set the width of the element in HTML
- Set width between table cells with CSS
- Flex container width when flex-flow is set to column wrap in HTML
- HTML table with 100% width, with vertical scroll inside tbody
- How to set viewport height and width in CSS
- How to use height and width attributes in HTML?
- How to set the number of rows a table cell should span in HTML?
- How to set the width of an element in JavaScript?
- How to set the width of Textbox using FabricJS?
- HTML width Attribute
- HTML width Attribute
- How to use image height and width attribute in HTML Page?
- How to create table footer in HTML?
- How to create table heading in HTML?

Advertisements