CODEWITHSUNDEEP
html
SkillSet
SkillSet

Reputation: 651

HTML Tables and Table Data Alignment

I am trying to create a table, that has 4 columns and multiple rows. When I try to add more data to the table, the information does not drop under the correct header. Information that is suppose to fall under the 3rd table header is falling under the bottom of the information under my first header. Here is my code.

<table>
<table style="width:800px">
<tr>
  <th><h4>I.T. Department</h4></th>
  <th><h4>Accounting Department</h4></th> 
  <th><h4>Tax Filings & Surplus Lines Department</h4></th>
  <th><h4>Licensing Department<h4></th>
</tr>
<tr>
<td align="center" rowspan="2"><br>Test Test<br>I.T. Manager<br>xxx-xxx-xxxx<br><br>                 <br>Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx</td></tr>
<tr><td align="center" rowspan="2">Test Test<br>Accounting Supervisor<br>xxx-xxx-   xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx</td></tr>



</table>

This is the line I was using to try to add more data.

<tr><td align="center" rowspan="2">Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx</td></tr>

What am I doing wrong?

Upvotes: 0

Views: 139

Answers (2)

bloodyKnuckles
bloodyKnuckles

Reputation: 12089

Does this produce the output you're looking for?

<table border="1">
<tr>
  <th><h4>I.T. Department</h4></th>
  <th><h4>Accounting Department</h4></th> 
  <th><h4>Tax Filings & Surplus Lines Department</h4></th>
  <th><h4>Licensing Department<h4></th>
</tr>

<tr>

    <!-- IT -->
    <td align="center">
        <br>Test Test<br>I.T. Manager<br>xxx-xxx-xxxx<br><br><br>Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- ACCOUNTING -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-   xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- TAX -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- LICENSING -->
    <td align="center">
    </td>

</tr>

</table>

I removed the "rowspans" and the extra TR tags, and added a border for troubleshooting purposes.

If you want to add more rows, copy and paste the TRs and TDs and change out the info in the TD tags.

Better yet, here's the data split into multiple rows:

<table border="1">
<tr>
  <th><h4>I.T. Department</h4></th>
  <th><h4>Accounting Department</h4></th> 
  <th><h4>Tax Filings & Surplus Lines Department</h4></th>
  <th><h4>Licensing Department<h4></th>
</tr>

<tr>
    <!-- IT -->
    <td align="center">
        Test Test<br>I.T. Manager<br>xxx-xxx-xxxx
    </td>

    <!-- ACCOUNTING -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- TAX -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- LICENSING -->
    <td align="center">
    </td>

</tr>

<tr>
    <!-- IT -->
    <td align="center">
        Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- ACCOUNTING -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- TAX -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- LICENSING -->
    <td align="center">
    </td>

</tr>

</table>

Upvotes: 1

Barmar
Barmar

Reputation: 782508

In a table, each <tr> starts a new row, and <td> specifies a column within a row. So it should be:

<tr>
    <td align="center" rowspan="2"><br>Test Test<br>I.T. Manager<br>xxx-xxx-xxxx<br><br>                 <br>Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx</td>
    <td align="center" rowspan="2">Test Test<br>Accounting Supervisor<br>xxx-xxx-   xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx</td>
</tr>

To add another column, just add another <td>...</td> block inside the <tr>...</tr> block.

Upvotes: 1

Related Questions