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

Make all Columns the Same Size


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 HTML and CSS, 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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

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





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.