CODEWITHSUNDEEP
htmlcss
rekotc
rekotc

Reputation: 555

How to center the text of a thead in a table

let's say that i have the following simple table:

    <style type="text/css"> 
    table#one {
    width: 100%;
    }
    </style>
   
    <table id="one">
     <thead>
      <tr>
       <th colspan="1" >Top Title</th>
      </tr>
     </thead>

     <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
     </tr>
     <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
     </tr>

    </table>

I'd like the "Top Title" to be exactly in the top middle of the table, but i don't know if it's possible to get this effect. Any suggestion?

Thanks in advance

Upvotes: 0

Views: 1332

Answers (2)

user7174959
user7174959

Reputation:

Change colspan of 1 to colspan of 3. Your colspan should be the number of <td> elements in order to center it.

    <style type="text/css"> 
    table#one {
    width: 100%;
    }
    </style>
   
    <table id="one">
     <thead>
      <tr>
       <th colspan="3" >Top Title</th>
      </tr>
     </thead>

     <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
     </tr>
     <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
     </tr>

    </table>

Upvotes: 1

Rion Williams
Rion Williams

Reputation: 76577

Just use a colspan=3 to ensure that your header spans all of the columns within the table :

<th colspan="3">Top Title</th>

Example enter image description here

table#one {
  width: 100%;
}
<table id="one">
  <thead>
    <tr>
      <th colspan="3">Top Title</th>
    </tr>
  </thead>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Upvotes: 2

Related Questions