How To Create Equal Width Table Cell Using CSS ? - GeeksforGeeks

Trang chủ » Html Table Equal Column Width Css » How To Create Equal Width Table Cell Using CSS ? - GeeksforGeeks

Có thể bạn quan tâm

Creating equal-width table cells using CSS refers to adjusting the table’s layout so that all columns maintain the same width. This technique ensures a consistent and organized appearance, making the table content easier to read and visually balanced.

Here we are following some common approaches:

Table of Content

  • Using table-layout property
  • Using CSS width property

Using table-layout property

The table-layout property in CSS controls how a table’s columns are sized. Setting it to `fixed` ensures equal column widths, regardless of content, providing a consistent layout for better readability and a balanced appearance.

Syntax

table-layout: auto|fixed|initial|inherit;

Example: In this example we use the table-layout property with two tables: one with auto width and another with fixed width, demonstrating default and equal cell widths in a styled format.

HTML <!DOCTYPE html> <html> <head> <title>table-layout property</title> <style> table{ border-collapse:collapse; border:1pxsolidblack; } th, td{ border:1pxsolidblack; } table#table1{ table-layout:auto; width:200px; } /* Equal width table cell */ table#table2{ table-layout:fixed; width:200px; } div{ max-width:200px; padding:10px; border:1pxsolidblack; } h1{ color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <div> <h3>Default width table cell</h3> <table id="table1"> <tr> <th>Author Name</th> <th>Age</th> <th>College</th> </tr> <tr> <td>RaviPratap Singh</td> <td>24</td> <td>GFG</td> </tr> <tr> <td>Rakesh Singh</td> <td>25</td> <td>GEEKS</td> </tr> </table> </div><br> <div> <h3>Equal width table cell</h3> <table id="table2"> <tr> <th>Author Name</th> <th>Age</th> <th>College</th> </tr> <tr> <td>RaviPratap Singh</td> <td>24</td> <td>GFG</td> </tr> <tr> <td>Rakesh Singh</td> <td>25</td> <td>GEEKS</td> </tr> </table> </div> </center> </body> </html>

Output:

Using CSS width property

The CSS width property allows you to define specific widths for table columns. Setting widths in equal percentage values ensures that each column remains the same size, providing a consistent layout regardless of the content or window size.

Syntax

width: auto | value | initial | inherit;

Example: In this example we the table-layout property with two tables: one with default cell widths and another with equal widths (33% each), styled with borders and a centered layout.

HTML <!DOCTYPE html> <html> <head> <title>table-layout property</title> <style> table{ border-collapse:collapse; border:1pxsolidblack; } th, td{ border:1pxsolidblack; } table#table2td{ width:33%; } div{ max-width:200px; padding:10px; border:1pxsolidblack; } h1{ color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <div> <h3>Default width table cell</h3> <table id="table1"> <tr> <th>Author Name</th> <th>Age</th> <th>College</th> </tr> <tr> <td>RaviPratap Singh</td> <td>24</td> <td>GFG</td> </tr> <tr> <td>Rakesh Singh</td> <td>25</td> <td>GEEKS</td> </tr> </table> </div><br> <div> <h3>Equal width table cell</h3> <table id="table2"> <tr> <th>Author Name</th> <th>Age</th> <th>College</th> </tr> <tr> <td>RaviPratap Singh</td> <td>24</td> <td>GFG</td> </tr> <tr> <td>Rakesh Singh</td> <td>25</td> <td>GEEKS</td> </tr> </table> </div> </center> </body> </html>

Output:

R

Raghav Ganesh Follow Improve Next Article

Từ khóa » Html Table Equal Column Width Css