CODEWITHSUNDEEP
htmlcss
Kmiles1990123
Kmiles1990123

Reputation: 189

Label above table

So I have this

echo   
"<div class=''>
 <table class='table' border='1'>
     <tr class='head'>

     <th>Section Name</th>
     <th></th>
     <th>Ae</th>
     <th>Pt</th>
     <th>Prin</th>

How can I get a nice LABEL above it that looks like its apart of the table, But it is centered in the middle above the THs I want this to represent the Tables Name, For instance it will say. Table 1 centered and above this table but still in the borders of the table.

Upvotes: 0

Views: 6620

Answers (2)

j08691
j08691

Reputation: 207900

I'd insert a <caption> element between the opening <table> element and the first <tr> like:

<table style="width: 100%">
    <caption>Table 1</caption>
    <tr>...

The <caption> was pretty much made for this:

The HTML <caption> Element (or HTML Table Caption Element) represents the title of a table.Though it is always the first descendant of a <table>, its styling, using CSS, may place it elsewhere, relative to the table.

Upvotes: 5

Jack Guy
Jack Guy

Reputation: 8523

Just add another row with a colspan for your number of columns.

<table>
   <tr>
      <td colspan="5" class="label">Table 1</td>
   </tr>
   ... Your table ...
</table>

You can center the text with CSS.

.label {
   text-align: center;
}

Upvotes: 1

Related Questions