CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designhtml-table
kkkkk
kkkkk

Reputation: 716

Html how to make a table with multiple headers?

I want to make a table. I know how to make in html simple table. I want to have a few headers. A few types of header, similar to photo. I don't know number of it, I would count it in my program. What should I use, about what should I read?

I tried this:

<table border="1" width="100%">
<tr>
    <th>AAA1</th>
    <th>AAA2</th> 
</tr>
<tr>
    <th>KKK1</th>
    <th>KKK2</th>
    <th>KKK3</th>
    <th>KKK3</th>
</tr>

<tr>
    <th>PPP1</th>
    <th>PPP2</th>
    <th>PPP3</th>
    <th>PPP4</th>
    <th>PPP5</th>
</tr>
</table>

But I know it is too simple and will not give me something similar to picture. I read about colspan, but it will not give me a result which I want. Maybe there is a bootstrap for it?

enter image description here

Upvotes: 13

Views: 27324

Answers (3)

Omar Trkzi
Omar Trkzi

Reputation: 301

I ran into the same issue in a complex situation involving some twig loops, etc ... and needed a better solution than what the other answers provided.

And this worked like charm:

<!-- Some BootStrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Table --->
<table class="table table-bordered">
  <col/>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

Explanation of why this works, in detail, is here, and the docs of <col/> are here.

Upvotes: 2

mohammad izadi
mohammad izadi

Reputation: 9

if you want to have some headers for a header you can use colspan attrebute for example if you want have 2 header for a header you can use colspan="2" for first header i wish i understood your mean.

also for tables ,, not for this problem you can use class="table" from bootstrap.

Upvotes: 0

cthrall
cthrall

Reputation: 329

You can have different headers for different rows. There is a good example on the W3 site. If you have questions about markup validity, you can use the W3 validator web page to check your HTML.

Upvotes: 5

Related Questions