- 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
Controlling Table Layout using CSS
To control the table layout, use the table-layout property. You can set the layout as −
table-layout: auto|fixed|initial|inherit;
Example
Let us now see an example to control the table layout with value auto −
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; background-color: black; color: white; } table#demo { table-layout:auto; width: 210px; } </style> </head> <body> <h2>Team Ranking Table</h2> <table id="demo"> <tr> <th>Team</th> <th>Rank</th> <th>Points</th> </tr> <tr> <td>India</td> <td>1</td> <td>200</td> </tr> <tr> <td>England</td> <td>2</td> <td>180</td> </tr> <tr> <td>Australia</td> <td>3</td> <td>150</td> </tr> <tr> <td>NewZealand</td> <td>4</td> <td>130</td> </tr> <tr> <td>SouthAfrica</td> <td>5</td> <td>100</td> </tr> <tr> <td>WestIndies</td> <td>6</td> <td>80</td> </tr> <tr> <td>Pakistan</td> <td>7</td> <td>70</td> </tr> </table> </body> </html>
Output
Example
Let us now see another example −
<!DOCTYPE html> <html> <head> <style> table { background-color: green; color: white; } table#demo { table-layout: fixed; width: 100%; } </style> </head> <body> <h2>Team Ranking Table</h2> <table id="demo"> <tr> <th>Team</th> <th>Rank</th> <th>Points</th> </tr> <tr> <td>India</td> <td>1</td> <td>200</td> </tr> <tr> <td>England</td> <td>2</td> <td>180</td> </tr> <tr> <td>Australia</td> <td>3</td> <td>150</td> </tr> <tr> <td>NewZealand</td> <td>4</td> <td>130</td> </tr> <tr> <td>SouthAfrica</td> <td>5</td> <td>100</td> </tr> <tr> <td>WestIndies</td> <td>6</td> <td>80</td> </tr> <tr> <td>Pakistan</td> <td>7</td> <td>70</td> </tr> </table> </body> </html>
Output
- Related Articles
- Controlling Table Layout in CSS
- Controlling the Position of Table Caption using CSS
- Usage of CSS table-layout property
- Create a Column Layout using CSS
- Controlling the Visibility of Elements using CSS
- CSS Grid Layout
- Controlling Pagination with CSS
- CSS Flexbox Layout Module
- Advance CSS layout with flexbox
- Collapsing Table Borders using CSS
- Controlling the Visibility of elements Working with CSS
- Controlling the Dimensions of Flex Items in CSS
- Set areas within the grid layout in CSS
- Define the number of columns in CSS Grid Layout
- How to create a responsive blog layout with CSS?

Advertisements