CODEWITHSUNDEEP
htmlhtml-table
user977191
user977191

Reputation: 871

HTML Table width in percentage, table rows separated equally

When I create a table in html, a table with a width of 100%, if I want all the cells (tds) to be divided in equal parts, do I have to enter the width % for each cell? Am I "obliged" to do it?

E.g.:

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
   </tr>
</table>

OR the following could also be the right procedure, not to write the width in each tds if I want each of them to be devided equally:

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

I know it works with both manners but I just want to know the "legit" way to do it.

Upvotes: 41

Views: 223908

Answers (5)

David Tran
David Tran

Reputation: 10606

You need to enter the width % for each cell. But wait, there's a better way to do that, it's called CSS:

<style>
     .equalDivide tr td { width:25%; }
</style>

<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

Upvotes: 33

mlunoe
mlunoe

Reputation: 4490

This is definitely the cleanest answer to the question: https://stackoverflow.com/a/14025331/1008519. In combination with table-layout: fixed I often find <colgroup> a great tool to make columns act as you want (see codepen here):

table {
 /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
 table-layout: fixed;
}
.fixed-width {
  width: 100px;
}
.col-12 {
  width: 100%;
}
.col-11 {
  width: 91.666666667%;
}
.col-10 {
  width: 83.333333333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.666666667%;
}
.col-7 {
  width: 58.333333333%;
}
.col-6 {
  width: 50%;
}
.col-5 {
  width: 41.666666667%;
}
.col-4 {
  width: 33.333333333%;
}
.col-3 {
  width: 25%;
}
.col-2 {
  width: 16.666666667%;
}
.col-1 {
  width: 8.3333333333%;
}

/* Stylistic improvements from here */

.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
table {
  width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
  padding: 8px;
  border: 1px solid gray;
}
<table cellpadding="0" cellspacing="0" border="0">
  <colgroup>
    <col /> <!-- take up rest of the space -->
    <col class="fixed-width" /> <!-- fixed width -->
    <col class="col-3" /> <!-- percentage width -->
    <col /> <!-- take up rest of the space -->
  </colgroup>
  <thead>
    <tr>
      <th class="align-left">Title</th>
      <th class="align-right">Count</th>
      <th class="align-left">Name</th>
      <th class="align-left">Single</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
      <td class="align-right">19</td>
      <td class="align-left">Lisa McArthur</td>
      <td class="align-left">No</td>
    </tr>
    <tr>
      <td class="align-left">This is a shorter title</td>
      <td class="align-right">2</td>
      <td class="align-left">John Oliver Nielson McAllister</td>
      <td class="align-left">Yes</td>
    </tr>
  </tbody>
</table>


<table cellpadding="0" cellspacing="0" border="0">
  <!-- define everything with percentage width -->
  <colgroup>
    <col class="col-6" />
    <col class="col-1" />
    <col class="col-4" />
    <col class="col-1" />
  </colgroup>
  <thead>
    <tr>
      <th class="align-left">Title</th>
      <th class="align-right">Count</th>
      <th class="align-left">Name</th>
      <th class="align-left">Single</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
      <td class="align-right">19</td>
      <td class="align-left">Lisa McArthur</td>
      <td class="align-left">No</td>
    </tr>
    <tr>
      <td class="align-left">This is a shorter title</td>
      <td class="align-right">2</td>
      <td class="align-left">John Oliver Nielson McAllister</td>
      <td class="align-left">Yes</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Chinoto Vokro
Chinoto Vokro

Reputation: 968

Use the property table-layout:fixed; on the table to get equally spaced cells. If a column has a width set, then no matter what the content is, it will be the specified width. Columns without a width set will divide whatever room is left over among themselves.

<table style='table-layout:fixed;'>
    <tbody>
        <tr>
            <td>gobble de gook</td>
            <td>mibs</td>
        </tr>
    </tbody>
</table>

Just to throw it out there, you could also use <colgroup><col span='#' style='width:#%;'/></colgroup>, which doesn't require repetition of style per table data or giving the table an id to use in a style sheet. I think setting the widths on the first row is enough though.

Upvotes: 49

Racooon
Racooon

Reputation: 1496

you can try this, I would do it with CSS, but i think you want it with tables without CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <body leftmargin=0 rightmargin=0>
      <table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px"> 
         <tr>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
         </tr>
      </table> 
   </body>
</html>

Upvotes: 2

Nick Brunt
Nick Brunt

Reputation: 10047

Yes, you will need to specify the width for each cell, otherwise they will try to be "intelligent" about it and divide the 100% between whichever cells think they need it most. Cells with more content will take up more width than those with less.

To make sure you get equal width for each cell you need to make it clear. Either do it as you already have, or use CSS.

table.className td { width: 25%; }

Upvotes: 2

Related Questions