How To Give The Cells Of A Table Equal Width In HTML (HTML/CSS)

How to Give the Cells of a Table the Same Width in HTML (HTML/CSS) by Christopher Heng, thesitewizard.com

I was asked by a visitor how she could give the cells of a table equal width, since by default, the size of the cells in all the columns changed every time she added content.

Prerequisites

Since my visitor did not specify any web editor, I will assume that she is coding directly in HTML and CSS. This makes the article useful no matter which editor is being used, since any good software will have a way for you to directly modify the HTML and CSS.

A side effect of this is that you will need to know how to modify and insert CSS and HTML, otherwise the information here won't be very useful.

The Modern Method of Sizing Tables

Although it is possible to set the width of your table and its cells directly in HTML, if your web page is in HTML 4.01 or XHTML 1.0 (eg, using the "width" attribute of the <table> and <td> tags), this article will only deal with how it can be done in CSS. This way, your code will still be valid even if you switch to HTML5. (The latter no longer supports the width attributes.)

Let's say that your table has 4 columns.

<table> <tr> <td>First column</td> <td>Second column</td> <td>Third column</td> <td>Fourth column</td> </tr> <tr> <td>More data for the first column</td> <td>More data for the second column</td> <td>More data for the third column</td> <td>More data for the fourth column</td> </tr> </table>

The CSS to make all the columns equal in width is as follows.

table { table-layout: fixed ; width: 100% ; } td { width: 25% ; }

The table-layout: fixed; rule specifies that the table is to take its dimensions from the <table> element's width and the width of the first row of cells (or the <col> elements, if you have them). If you don't specify it, the default of auto will cause the browser to adjust the width of the table and its cells according to how much content you have in each of them. This results in the ever-changing widths that my visitor encountered as she added content to the table.

The CSS above then specifies that the table is to occupy 100% of the browser's window width, and each cell to take up 25% of that.

If you only want your rules to be applied to a specific table, and not all tables on your page, give the table an id and set the rules to apply only to that id.

Take the demo table below:

Demo table

First column	Second column
More data for the first column	More data for the second column

The HTML code is as follows:

<table id="demotable"> <caption>Demo table</caption> <tr> <td>First column</td> <td>Second column</td> </tr> <tr> <td>More data for the first column</td> <td>More data for the second column</td> </tr> </table>

And the CSS is like this:

table#demotable { table-layout: fixed ; width: 100% ; border-collapse: collapse ; border: 1px black solid ; } table#demotable td { width: 50% ; border: 1px black solid ; padding: 10px ; } table#demotable caption { font-style: italic ; }

As you can see, the rules are written in such a way so that they only apply to tables with an id of demotable.

For the curious, I have added borders to the cells and table so that the result looks like a table in your browser. I have also added a border-collapse: collapse; rule so that the table won't have two lines between cells. In addition, I have placed the caption in italics. These rules are optional and have nothing to do with making the cells the same size. You don't have to add them if you don't want them.

For Bloggers and Those Without Access to the Style Sheet

If you are using blog software and you do not have access to your site's style sheets (or perhaps you have access, but it's just not convenient to add rules there), it's possible to put the CSS directly in the HTML "style" attribute for the table and first row cells.

<table style="table-layout: fixed; width: 100%;" > <tr> <td style="width:25%;">First column</td> <td style="width:25%;">Second column</td> <td style="width:25%;">Third column</td> <td style="width:25%;">Fourth column</td> </tr> [...etc...]

You do not need to add the width rule to the cells in subsequent rows. The browser will give them the same width as those in the first row.

Copyright © 2018 Christopher Heng. All rights reserved. Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

You are here: Top > Cascading Style Sheets (CSS) Tutorials and Tips > How to Give the Cells of a Table the Same Width in HTML (HTML/CSS)

Other articles on: CSS, HTML

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

• What is the Best Font Size for a Web Page? And How to Change Font Sizes with CSS
• How to Hide Images on a Website When It is Viewed on a Mobile Phone
• How to Create a Rectangular Box to Contain Your Text/Pictures with CSS
• How to Add a Video to Your Website in HTML (HTML5)
• How to Rescue Your Website from the Clutches of a Bad Web Designer or Bad Web Host
• How to Make / Create Your Own Website: The Beginner's A-Z Guide
• Does the Price of a Domain Depend on the Name Chosen? Why do Some Domains Cost So Much?
• How to Register Your Own Domain Name

New Articles

• How to Convert Your Website from XHTML 1.0 to HTML5 the Quick and Easy Way
• How to Set the Height of a DIV Relative to a Browser Window (CSS)
• How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
• How to Insert Meta Tags into a Web Page with BlueGriffon
• How to Play a Song (or Some Other Audio Clip) from a List on a Website
• How to Draw a Horizontal Line on a Web Page with Expression Web
• How to Create a Website Free of Charge
• Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
• What's the Difference Between a Domain Name Registrar and a Web Host?
• How to Make a Mobile-Friendly Website: Responsive Design in CSS

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/css/make-table-cells-same-size.shtml" target="_top">How to Give the Cells of a Table the Same Width in HTML (HTML/CSS)</a>

It will appear on your page as:

How to Give the Cells of a Table the Same Width in HTML (HTML/CSS)