HTML表间距

Question

I am attempting to create a uniform series of simple HTML tables on a website that seem determined to decide their own column spacing despite having the exact same syntax as the others. Some of them are well-spaced, and others are comically close or far apart. How can I fix the column widths to be the same so they appear uniform?

This is an example of one of the 8 tables:

<table class=”table4”>
  <tbody>
    <tr>
      <td><b>Qty</b></td>
      <td><b>Wire EDM</b></td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mitsubishi FX 10</td>
    </tr>
  <tbody>
</table>

I have tried 'cellspacing' to no avail. I've also deleted and re-written the code multiple times, but they come out without change.

I'm brand new to HTML, and this is also not my work, I'm trying to rework someone else's code. Clear and complete answers would be greatly appreciated!

Thank you in advance.

Answer 1

Use CSS to determine your column spacing, as well as changing anything related to the "style" or "interface" of your site.

If you want all your columns on the whole site to be uniform, a simple CSS rule like the following should do it for you:

td {
    width: 120px;
}

If you want percentages, you can do that as well. For example, if your tables always have 4 columns, you could do something like the following:

td {
    width: 25%;
}

Check out the example below:

 table { border: 1px solid silver; width: 500px; } td { border: 1px solid silver; width: 25%; } 

 <table> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> </table> 

To add CSS to your site, there are many resources online to get you started: https://developer.mozilla.org/en-US/Learn/CSS/Using_CSS_in_a_web_page

Answer 2

A table will determine its own column widths based on its content, so if you want different tables to have the same proportions you have to tell the browser.

For example:

 table { border-collapse: collapse; border: 1px solid #ccc; margin:4px; } th, td {border: 1px solid #ccc;} table.uniform { width:300px; } table.uniform th:first-child { width:30%; } 

 <p>Some uneven tables:</p> <table class="table1"> <thead> <tr> <th>eg</th> <th>A Cell Heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Some content</td> </tr> </tbody> </table> <table class="table2"> <thead> <tr> <th><b>Qty</b></th> <th><b>Wire EDM</b></th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>Mitsubishi FX 10</td> </tr> </tbody> </table> <p>The same tables but with some widths defined:</p> <table class="uniform"> <thead> <tr> <th>eg</th> <th>A Cell Heading</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>Some content</td> </tr> </tbody> </table> <table class="uniform"> <thead> <tr> <th><b>Qty</b></th> <th><b>Wire EDM</b></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mitsubishi FX 10</td> </tr> </tbody> </table> <p>Example with inline styling:</p> <table style="width:300px"> <thead> <tr> <th style="width:30%"><b>Qty</b></th> <th><b>Wire EDM</b></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mitsubishi FX 10</td> </tr> </tbody> </table>