- 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 in CSS
The CSS table-layout property is to define the algorithm to be used by the browser for laying out rows, columns, and cells of a table. Through this, you can control the table layout.
Syntax
The syntax of CSS table-layout property is as follows −
Selector { table-layout: /*value*/ }
The following examples illustrate CSS table-layout property −
Example
<!DOCTYPE html> <html> <head> <style> table { margin: 2em; display: inline-block; border: 1px solid black; } td { border: 1px solid black; } #one { table-layout: auto; width: auto; } #one + table { table-layout: fixed; width: 100px; } </style> </head> <body> <h2>Table Layouts and its working in CSS</h2> <table id="one"> <caption>Cricketers</caption> <tr> <td>ShaneWarne</td> </tr> <tr> <td></td> <td>Adam</td> </tr> <tr> <td></td> <td>Shimron Hetmyer</td> <td></td> </tr> </table> <table> <caption>Cricketers</caption> <tr> <td>ShaneWarne</td> </tr> <tr> <td></td> <td>Adam</td> </tr> <tr> <td></td> <td>Shimron Hetmyer</td> <td></td> </tr> </table> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> div { margin: auto; width: 50%; box-shadow: inset 0 0 14px orange; } td { box-shadow: inset 0 0 5px lime; white-space: nowrap; outline: thin dotted; } table { border: 3px solid black; table-layout: fixed; width: 100%; } </style> </head> <body> <div> <table> <caption>Demo Caption</caption> <tr> <td>ABCD</td> </tr> <tr> <td></td> <td>EFGH</td> </tr> <tr> <td></td> <td>IJKLM NOPQRST</td> <td></td> </tr> </table> </div> </body> </html>
Output
This gives the following output −
- Related Articles
- Controlling Table Layout using CSS
- Usage of CSS table-layout property
- Controlling the Position of Table Caption using CSS
- CSS Grid Layout
- Controlling Pagination with CSS
- CSS Flexbox Layout Module
- Advance CSS layout with flexbox
- Create a Column Layout using CSS
- Controlling the Dimensions of Flex Items in CSS
- Set areas within the grid layout in CSS
- Controlling the Visibility of Elements using CSS
- Define the number of columns in CSS Grid Layout
- How to add table rows Dynamically in Android Layout?
- Controlling the Visibility of elements Working with CSS
- Define the width of each column in CSS Grid Layout

Advertisements