- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
Published on 30-Dec-2019 09:30:13
- Related Questions & Answers
- Controlling Table Layout in CSS
- Controlling the Position of Table Caption using CSS
- Usage of CSS table-layout property
- Controlling the Visibility of Elements using CSS
- Controlling Pagination with CSS
- Create a Column Layout using CSS
- CSS Grid Layout
- 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
- How to add table rows Dynamically in Android Layout?
- Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
Advertisements