0

I want to show an HTML table with a caption on top and a horizontal line underneath, like this:

table with caption and hr

I see two ways to implement this, but both have their respective downsides. First method is like this:

<table>
  <caption><b>***** yada yada yada *****</b></caption>
  <tr>
    <th></th>
    <th>lorem</th>
    <th>ipsum</th>
    <th>dolor</th>
    <th>sit</th>
    <th>amet</th>
  </tr>
  <tr>
    <th>hello</th>
    <td>note</td>
    <td>the</td>
    <td>hori</td>
    <td>zontal</td>
    <td>line</td>
  </tr>
  <tr>
    <th>world</th>
    <td>under</td>
    <td>neath:</td>
    <td>2nd</td>
    <td>caption??</td>
    <td>tfoot??</td>
  </tr>
  <tfoot>
    <tr>
      <td colspan="6">
        <hr>
      </td>
    </tr>
  </tfoot>
</table>

What I don't like about this is that I have to use the colspan attribute; you know, the real table is generated from data, and finding out the colspan means some extra JavaScript I have to write, if I do it like this.

The other way would be like this:

<table>
  <caption><b>***** yada yada yada *****</b></caption>
  <caption style="caption-side: bottom;">
    <hr>
  </caption>
  <tr>
    <th></th>
    <th>lorem</th>
    <th>ipsum</th>
    <th>dolor</th>
    <th>sit</th>
    <th>amet</th>
  </tr>
  <tr>
    <th>hello</th>
    <td>note</td>
    <td>the</td>
    <td>hori</td>
    <td>zontal</td>
    <td>line</td>
  </tr>
  <tr>
    <th>world</th>
    <td>under</td>
    <td>neath:</td>
    <td>2nd</td>
    <td>caption??</td>
    <td>tfoot??</td>
  </tr>
</table>

By using caption instead of tfoot, I don't have to give the colspan, which is good. But the table already has a caption, and the second caption is not compliant with the spec.

The second method is simpler and looks just fine in all browsers I tested with, so I'm preferring that - browsers seem to be able to handle lot's of 'meaningful violations' of the spec. But it doesn't feel 100% comfortable to be 'naughty' like that.

Q1: Is there a way to do this without tfoot and colspan, while being spec compliant at the same time?

Q2: do the above methods really look the same in all browsers?

Improve this question
4
  • 2
    Why not just style the border-bottom:1px solid black;?
    – Scott Marcus
    Commented Oct 18, 2019 at 17:13
  • 1
    What's wrong with table {border-bottom: 1px solid black;}? @ScottMarcus GMTA (4 seconds) :)
    – tao
    Commented Oct 18, 2019 at 17:14
  • @AndreiGheorghiu Nothing. That's why I suggested it.
    – Scott Marcus
    Commented Oct 18, 2019 at 17:17
  • @Scott: GMTA = great minds think alike. We asked the same question at the same time (4 seconds difference).
    – tao
    Commented Oct 18, 2019 at 17:18

3 Answers 3

Reset to default
0

Q1: Is there a way to do this without tfoot and colspan, while being spec compliant at the same time?

Yes, do your styling with CSS. HTML is a semantic language.

Q2: do the above methods really look the same in all browsers?

In any modern, standards compliant client, yes they will.

Also, the <b> element shouldn't be used for purely stylistic purposes. It's a semantic tag to invoke emphasis. Styling should be done with CSS (shown below).

table { border-bottom: 1px solid black; }
caption { font-weight:bold; }
<table>
  <caption>***** yada yada yada ****</caption>
  <tr>
    <th></th>
    <th>lorem</th>
    <th>ipsum</th>
    <th>dolor</th>
    <th>sit</th>
    <th>amet</th>
  </tr>
  <tr>
    <th>hello</th>
    <td>note</td>
    <td>the</td>
    <td>hori</td>
    <td>zontal</td>
    <td>line</td>
  </tr>
  <tr>
    <th>world</th>
    <td>under</td>
    <td>neath:</td>
    <td>2nd</td>
    <td>caption??</td>
    <td>tfoot??</td>
  </tr>
</table>

Improve this answer
1
  • Q2: no, they don't, see my answer. Not that it's all that important, but for the record, they don't.
    – mathheadinclouds
    Commented Dec 22, 2019 at 15:12
0

Q2: do the above methods really look the same in all browsers?

No, they don't. The hr in tfoot is a couple of pixels shorter compared to the hr within caption, the line thickness of '1px solid black' is not really the same line thickness as that of hr, and also, the vertical spacing varies by a few pixels (not many) between the 3 solutions.

But yes, I agree, you should do this with CSS, and not use hr at all.

Improve this answer
-1 

<!DOCTYPE html> 
<html> 

<head> 
	<title>HTML colspan Attribute</title> 
	<style> 
		table, 
		th, 
		td { 
			border: 1px solid black; 
			border-collapse: collapse; 
			padding: 6px; 
			text-align: center; 
		} 
	</style> 
</head> 

<body> 
	<center> 
		<h1 style="color: green;">Table Design</h1> 
		<h2>HTML colspan & Rowspan Attribute</h2> 

		<table> 
			<tr> 
				<th colspan="2">Name</th> 
				<th colspan="2">Phone</th> 
				<th colspan="2">Address</th> 
			</tr> 

			<tr> 
				<td>First Name</td> 
				<td>Last Name</td> 
				<td>Home</td> 
				<td>Office</td> 
				<td>Present</td> 
				<td>Parmanent</td> 
			</tr> 

			<tr> 
				<td>Sayeed</td> 
				<td>Dev</td> 
				<td>017597383</td> 
				<td>01784763</td> 
				<td>BD</td> 
				<td>Dhaka</td> 
			</tr>
			<tr> 
				<td>Sayeed</td> 
				<td>Dev</td> 
				<td colspan="2">017597383</td>  
				<td colspan="2">USA</td>  
			</tr> 
				<tr> 
				<td rowspan="2">Sayeed</td> 
				<td >Dev</td> 
				<td >017597383</td>  
				<td >017597383</td>  
				<td rowspan="2">USA</td>  
				<td >Dhaka</td>  
			</tr>
				<tr> 
				<td>Dev</td> 
				<td >017597383</td>  
				<td >017597383</td>   
				<td >Dhaka</td>  
			</tr>
		</table> 
	</center> 
</body> 

</html>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.