“More quickly” how? By throwing more code at it? Seriously, if not using table tags for tabular data, just how exactly are you planning to break that data up? How are you developing the semantic relationship of cells with their row and column headings? Best you could hope for is endlessly nesting UL, and even then the relationships end up broken to non-existent.

Remember, your HTML is about more than perfectly sighted users sitting in front of displays. In fact if you have any of your HTML be it tags, classes, or ID’s chosen for appearance sake you are probably doing it all wrong.

To be optimal for everyone your tags should be chosen to say what things are, since not all displays can show font sizes, font weights, bullets, or even tabular layouts. More so things like search engines don’t give a flying purple fish about your layouts since as the joke goes, search engines don’t have eyeballs.

P is for grammatical paragraphs, not “oh this is some text”. EM is for emphasis, STRONG is for “more emphasis”, B and I are for “would be bold or italic for grammatical reasons” such as a book title not being CITEd or a entity in a legal document, and not “show this text in bold or italic”. Hence why the people who say things like “never use B and I” are ignorant and incorrect. See the derps who spent most of the ‘00’s claiming B and I were deprecated; no, no they weren’t! When a book title is made italic in a professionally written document you are NOT emphasizing it!

Headings create your logical document structure, with H1 (unless you’re using HTML 5’s idiotic pointless SECTION tag) is THE (singular) headING (singular) that everything on every page of your site is a subsection of, hence why under HTML 4 strict structural rules it was considered improper to have more than one H1 on a page, and the site title being the most likely candidate to be your H1. H2 means the start of a major subsection of the page with the first H2 being the start of the main content. (hence HTML 5’s MAIN tag being a pointless idiotic redundancy) H3 means the start of a subsection of the H2 before it… care to guess what H4 to H6 means? Even lowly HR does not mean to draw a line across the screeen!!! It means a chance in topic or section where heading text is unwanted or unwarranted!

UL and OL are for lists of selections or short bullet points (as in grammatical bullet points, not “hurr durz its be haz uh dotsy befures its”) and NOT “oh this is a bunch of sections”.

… and in that way, TABLE is for tabular data, and if you aren’t using table for tabular data properly establishing the relationships between columns and rows of related information, you’re doing it all wrong!

Which is why the first few tables in this article are incomplete broken gibberish, and even the last one is missing important details since where’s the SCOPE?!? Much less some of those TD in TBODY should likely be TH with scope=”row”.

<table>
<caption>Countries, Capital and Language</caption>
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Language</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Copyright &copy; 2018 Example Organization</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">India</th>
<td>New Delhi</td>
<td>Hindi</td>
</tr><tr>
<th scope="row">France</th>
<td>Paris</td>
<td>French</td>
</tr><tr>
<th scope="row">New Zealand</th>
<td>Wellington</td>
<td>English</td>
</tr>
</tbody></table>

Would be the proper complete semantic structure for such a table, since “capital” and “language” are structurally sub-information about the counties. The SCOPE attribute establishes the semantic relationship between columns and their headings for non-visual user-agents.

You’ve at least heard of semantic markup, right? The sick euphemism for “using HTML properly” we use so as not to offend the mouth-breathers who still have their heads wedged up 1997’s rump; vomiting up HTML 3.2 and slapping either the 4 tranny or 5 lip-service doctype atop it?

HTML is based on professional writing norms. If you aren’t following that logic, you’re not doing it right and what you do in your HTML should reflect that.

Just like how classes such as “w3-red”, “text-center”, “box-shadow” and so forth such as used by w3.css or bootcrap are mentally enfeebled halfwitted BS created by people unqualified to write a single line of HTML, much less be telling other people how to do so.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store