basictable icon indicating copy to clipboard operation
basictable copied to clipboard

Published 20 hours ago • verified publisher icon jerrylow

feature_request(thead): support tables without thead

Open Kristinita opened this issue 2 years ago • 0 comments

1. Summary

It would be nice, if Basic Table will support tables without <thead> tag.

2. Validity of tables without thead

  1. According to HTML Living Standard as of 15.8.2022, <thead> tag is optional, not required for tables.
  2. Official W3C HTML validator and another validators — htmllint, htmlhint, linthtml — allow the use of tables without <thead>.

3. MCVE

3.1. Sources

Sources on Repl.it:

  1. index.html

    <!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Kira Basic Table without thead</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basictable/dist/css/basictable.min.css">
	<script src="https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js" defer></script>
	<script src="basictable.js" defer></script>
</head>

<body>
	<table>
		<tbody>
			<tr>
				<td>Kira Amazing</td>
				<td>Kira Genius</td>
				<td>Kira Goddess</td>
			</tr>
		</tbody>
	</table>
</body>

</html>

  2. basictable.js

    new basictable('table');

3.2. Desired behavior

Stack the table as for tables with <thead>.

3.3. Current behavior

Demonstration on Repl.it.

Error in browser console:

Uncaught DOMException: Element.querySelectorAll: 'tr:first td' is not a valid selector basictable.min.js:4
   _setup https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js:4
   forEach self-hosted:164
   _setup https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js:4
   basictable https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js:4
   <anonymous> https://kirabasictable-without-thead.kristinita.repl.co/basictable.js:1

Basic Table without thead error

3.4. Behavior with thead

If I add <thead> syntax to this table (sources on Repl.it):

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>Kira Basic Table without thead</title>
+	<title>Kira Basic Table with thead</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basictable/dist/css/basictable.min.css">
	<script src="https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js" defer></script>
	<script src="basictable.js" defer></script>
</head>

<body>
+ 	<thead>
+		<tr>
+			<th>One</th>
+			<th>Two</th>
+			<th>Three</th>
+		</tr>
+	</thead>
	<table>
		<tbody>
			<tr>
				<td>Kira Amazing</td>
				<td>Kira Genius</td>
				<td>Kira Goddess</td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Basic Table will successfully work, see Repl.it demonstration.

Thanks.

Kristinita avatar Aug 18 '22 07:08 Kristinita