Why does this happen in HTML while creating tables?

Question

Why does this happen in HTML while creating tables?

105 Views Asked by Adithya Ps At 21 November 2023 at 14:52

I've written a XML code to create tables. But, the problem is whenever I remove the nested tag from a specific block the table row alternates. SOURCE CODE

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html PUBLIC "~//W3C//DTD XHTML 1.1/EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse=collapse" border="2">
<tr><td rowspan="20"><b>Department</b></td></tr>
<tr><tr><td rowspan="5">Sem1</td></tr>
<tr><td>sub1</td></tr>
<tr><td>sub2</td></tr>
<tr><td>sub3</td></tr></tr>
<tr><tr><td rowspan="5">Sem2</td></tr>
<tr><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr></tr>
<tr><tr><td rowspan="5">Sem3</td></tr>
<tr><td>sub7</td></tr>
<tr><td>sub8</td></tr>
<tr><td>sub9</td></tr></tr>
</table>
</body>

Any solutions?

OUTPUT correct output

But when i remove the i.e. the one outside, which encloses 4 lines of code.

<--!tr tag removed--> <tr><td rowspan="5">Sem2</td></tr>
<tr><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr> <--!tr tag removed-->

the output comes like this wrong output

Original Q&A

There are 1 best solutions below

**imhotap** · Answer 1 · 2023-11-21T20:05:10.107000

Leaving out the issue of XHTML already addressed in comments, you probably want HTML code such as the following:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr><td rowspan="20"><b>Department</b></td></tr>
<tr><td rowspan="3">Sem1</td><td>sub1</td></tr>
<tr><td>sub2</td></tr>
<tr><td>sub3</td></tr>
<tr><td rowspan="3">Sem2</td><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr>
<tr><td rowspan="3">Sem3</td><td>sub7</td></tr>
<tr><td>sub8</td></tr>
<tr><td>sub9</td></tr>
</table>
</body>
</html>

The effect you're observing with rowspan=5 is that when an HTML parser encounters a <tr> tag immediately followed by another <tr> tag, a </tr> end-element tag is inferred before the second <tr> start-element tag, and thus an empty table row in counted towards the rowspan value.

To get an idea of how this behavior of HTML parsers (originally derived from SGML end-tag inference) works, consider the above corrected HTML code with </tr> elements omitted:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr><td rowspan="20"><b>Department</b></td>
<tr><td rowspan="3">Sem1</td><td>sub1</td>
<tr><td>sub2</td>
<tr><td>sub3</td>
<tr><td rowspan="3">Sem2</td><td>sub4</td>
<tr><td>sub5</td>
<tr><td>sub6</td>
<tr><td rowspan="3">Sem3</td><td>sub7</td>
<tr><td>sub8</td>
<tr><td>sub9</td>
</table>
</body>
</html>

The latter is equivalent to the former according to the HTML specification which states that

A tr element's end tag can be omitted if the tr element is immediately followed by another tr element, or if there is no more content in the parent element.

And in fact, an SGML parser can infer those (provided <DOCTYPE html> is changed to <!DOCTYPE html "about:legacy"> to tell SGML the HTML parsing rules as explained in eg. https://sgmljs.net/docs/parsing-html-tutorial/parsing-html-tutorial.html; actually, even </td> end-elements can be omitted; this however isn't implemented in the built-in about:legacy-compat HTML mini-DTD of sgmlproc though, so one needs to use the full HTML DTD).

Now I would've loved to send you to W3C's nu HTML 5 validator to check your HTML but its results are confusing (check it our yourself), seemingly inferring additional tbody start-element tags, which isn't backed by the content model specification for the table element:

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

meaning tbody is optional and not inferred as a wrapper around tr elements even though its start- and end-elements can be omitted. The latter is how the parsing rules are implemented in the HTML5x and the newer 2020 and 2023 HTML Review Draft DTDs at https://sgmljs.net/docs/html5.html. This ambiguity is also briefly discussed in the the HTML 5 DTD reference.

See Alohci's comment regarding nu validator's inference of tbody elements.

See also WHATWG's HTML specification for the referenced citations.

Why does this happen in HTML while creating tables?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in XML

Related Questions in XHTML

Trending Questions

Popular # Hahtags

Popular Questions