How to Create Equal Width Table Cell Using CSS ? Last Updated : 10 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing table-layout propertyUsing CSS width propertyUsing table-layout propertyThe 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.Syntaxtable-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: 1px solid black; } th, td { border: 1px solid black; } 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: 1px solid black; } 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 propertyThe 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.Syntaxwidth: 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: 1px solid black; } th, td { border: 1px solid black; } table#table2 td { width: 33%; } div { max-width: 200px; padding: 10px; border: 1px solid black; } 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: Comment More infoAdvertise with us Next Article How to Create Equal Width Table Cell Using CSS ? raghav ganesh Follow Improve Article Tags : Web Technologies CSS Write From Home CSS-Questions Similar Reads How to Create a Full-Width Table using CSS? Creating a full-width table using CSS involves setting the table's width to 100% and adjusting other relevant properties to ensure that it stretches across the entire width of its parent container. In this article, we will explain the approach to creating a full-width table using CSS. ApproachCreate 2 min read How to Wrap Table Cell td Content using CSS? The word-wrap, and word-break properties in CSS are used to wrap content within a table cell (<td>).HTML<h3 style="text-align:center;"> Simple Example Without Word Wrap </h3> <table width="600" style="border-spacing: 0px; table-layout: fixed; margin-left:auto; margin-right:auto; 3 min read How to create table cell using HTML5 ? In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head> 1 min read How to Center a Table with CSS ? Here are different ways to center table in CSS.1. Center a Table using margin auto propertyThe CSS margin is used to set the space around the element. The margin auto enables dynamic and equal margins from both sides and center the element. Syntaxtable { margin: auto;}By setting the margin auto the 2 min read How to Create Header Cell in a Table using HTML? A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents 1 min read How to style block buttons (full-width) using CSS ? In this article, we will explore how to style block buttons with full width using CSS. Making buttons stand out on a website is crucial. Such types of buttons provide responsiveness to the web page that works well on various devices. Styling buttons with clear words, appealing colors, and effects, c 3 min read How to create a table row using HTML? Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody 1 min read How to Create Equal Height Columns in CSS ? Equal Height Columns in CSS refer to ensuring that multiple columns in a layout have the same height, regardless of the content inside each column. This can be achieved using modern CSS techniques like Flexbox, CSS Grid, or the Table display property.Table of ContentUsing FlexUsing GridUsing Table p 3 min read How to Define a Minimum Width for HTML Table Cell using CSS ? To set a minimum width for an HTML table cell using CSS, apply the min-width property directly to the <td> element, ensuring it does not shrink below the specified size. This ensures a minimum width for the cell content, maintaining layout integrity. Table of Content Using the min-width Proper 2 min read How to Create Table in HTML with Border without CSS ? Creating a table in HTML is a fundamental skill for web developers. Tables are used to organize data in a grid-like structure, making it easier to read and understand. In this article, we will learn how to create a simple table in HTML with borders, without using CSS styling. Step 1: Basic Table Str 2 min read Like