Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

aligning information with headings in a table - easy and urgent


Hi, if I have a table that displays headings with three fields of information for each heading like so:
|heading one|heading two|heading three|
|va |va |var  |va |va |var |va |va  |   var|

Ive tried numerous of doing ways of doing this but always end up with:
|heading one|heading two|heading three|
|va |va|var|va |va |var|va   |va|var |
ie the headings are not aligned with the information.

How can I write html code to achieve this?

Thank you
0
VolSpeak
Asked:
VolSpeak
  • 7
1 Solution
 
flow79Commented:
<table summary="" border="1">
<thead>
      <tr>
            <th style="width: 266px;" colspan="3">Heading 1</th>
            <th style="width: 266px;" colspan="3">Heading 2</th>
            <th style="width: 266px;" colspan="3">Heading 3</th>
      </tr>
      <tr>
            <th>SubHeading 1</th>
            <th>SubHeading 2</th>
            <th>SubHeading 3</th>
            <th>SubHeading 4</th>
            <th>SubHeading 5</th>
            <th>SubHeading 6</th>
            <th>SubHeading 7</th>
            <th>SubHeading 8</th>
            <th>SubHeading 9</th>
      </tr>
      </thead>
      <tbody>
        <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
      </tbody>
</table>
0
 
flow79Commented:
if you want all your headings to be one color (to seperate from the DATA) make it
<thead bgcolor="#ccffff">

0
 
flow79Commented:
or else or HTML/CSS to style the table in any manner youd like.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
flow79Commented:
also, i just looked at my code, you need to add: <tr> tags around each row of td's like so:

     <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
      </tr>

Sorry about forgetting the tr
0
 
flow79Commented:
you could also just keep on iterating it and making more and more subheading sets: such as (this is just to show you how far thead and tbody will go)

<table summary="" border="1" cellpadding="4">
<thead bgcolor="#ccffff">
      <tr>
            <th style="width: 266px;" colspan="9">Heading 1</th>
            <th style="width: 266px;" colspan="9">Heading 2</th>
            <th style="width: 266px;" colspan="9">Heading 3</th>
      </tr>
      <tr>
            <th colspan="3">SubHeading 1</th>
            <th colspan="3">SubHeading 2</th>
            <th colspan="3">SubHeading 3</th>
            <th colspan="3">SubHeading 4</th>
            <th colspan="3">SubHeading 5</th>
            <th colspan="3">SubHeading 6</th>
            <th colspan="3">SubHeading 7</th>
            <th colspan="3">SubHeading 8</th>
            <th colspan="3">SubHeading 9</th>
      </tr>
      <tr>
            <th>SubHeading 1</th>
            <th>SubHeading 2</th>
            <th>SubHeading 3</th>
            <th>SubHeading 4</th>
            <th>SubHeading 5</th>
            <th>SubHeading 6</th>
            <th>SubHeading 7</th>
            <th>SubHeading 8</th>
            <th>SubHeading 9</th>
            <th>SubHeading 1</th>
            <th>SubHeading 2</th>
            <th>SubHeading 3</th>
            <th>SubHeading 4</th>
            <th>SubHeading 5</th>
            <th>SubHeading 6</th>
            <th>SubHeading 7</th>
            <th>SubHeading 8</th>
            <th>SubHeading 9</th>
            <th>SubHeading 1</th>
            <th>SubHeading 2</th>
            <th>SubHeading 3</th>
            <th>SubHeading 4</th>
            <th>SubHeading 5</th>
            <th>SubHeading 6</th>
            <th>SubHeading 7</th>
            <th>SubHeading 8</th>
            <th>SubHeading 9</th>
      </tr>
      </thead>
      <tbody>
       <tr>
        <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
            <td><div align="center">DATA</div></td>
       </tr>
      </tbody>
</table>
0
 
flow79Commented:
hello?  any response?
0
 
flow79Commented:
did this help you VolSpeak?  I have provided code above and beyond your requirements.  Please respond.
0
 
VolSpeakAuthor Commented:

Sorry, i have very limited internet access and am just testing your response now, please be patient

Thanks :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now