CODEWITHSUNDEEP
htmlcaption
user559533
user559533

Reputation:

Browsers adding duplicate caption element in tables

I have this simple html table:

<!DOCTYPE html>
<html lang="pt" >
<head>
<style>
caption {margin-bottom: 24px}
</style>
</head>
<body>
<table>
	<caption>My caption<caption>
	<tr><td>a</td><td>1</td></tr>
	<tr><td>b</td><td>2</td></tr>
	<tr><td>c</td><td>3</td></tr>
	<tr><td>d</td><td>4</td></tr>
</table>

</body></html>

Now using "inspect element" in Chrome and Firefox(haven't tested in other browsers) I see that both browsers insert an additional empty caption tag in the code, below the original one.

Now since as shown in the example above, I have a margin on the caption element, in Chrome, the margin gets duplicated, so I'm getting a 48px bottom margin instead of the desired 24px because it's applied to both caption tags, but in Firefox, the margin is not applied to the empty caption, so the resulting margin is 24px.

So why is this empty caption tag being inserted by the browsers?

Upvotes: 1

Views: 54

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

It's because you aren't closing the <caption> element. When the browser sees this, it inserts the additional tag.

caption {
  margin-bottom: 24px
}
<table>
  <caption>My caption</caption>
  <tr>
    <td>a</td>
    <td>1</td>
  </tr>
  <tr>
    <td>b</td>
    <td>2</td>
  </tr>
  <tr>
    <td>c</td>
    <td>3</td>
  </tr>
  <tr>
    <td>d</td>
    <td>4</td>
  </tr>
</table>

Upvotes: 1

Related Questions