Mike-Ward.Net

Vertical Layout for HTML Tables

One of the difficulties I find with writing HTML tables is managing all the closing tags and indention to keep the code readable. Recently, I discovered the HTML5 spec does not require closing tags for data and rows. This allows me to write in a style that flattens out and nesting of tables and makes them easier to edit.

Example:

<table>
<tr>
<th> Server
<th> IP
<th> Description
<tr>
<td> cl1
<td> 192.168.100.1
<td> This is my first server in the list
<tr>
<td> cl2
<td> 10.10.1.22
<td> This is another one server
<tr>
<td> windows-5BSD567DSLOS
<td> 127.0.0.12
<td> This is customer windows vm. dont touch this!
<tr>
<td> DFHSDDFFXYXKENLONGNAME
<td> 192.168.1.50
<td> Some printer
</table>

And the result:

Server IP Description
cl1 192.168.100.1 This is my first server in the list
cl2 10.10.1.22 This is another one server
windows-5BSD567DSLOS 127.0.0.12 This is customer windows vm. dont touch this!
DFHSDDFFXYZKENLONGNAME 192.168.1.50 Some printer </table>
← newer older →
.Net, Technology, Life, Whatever

Recent Posts

Quick Tip - Clear ReSharper's Cache to Fix False Errors
Quick Tip - Refined GitHub
Vertical Layout for HTML Tables
Visual Studio 2017 Installer Quick Tip
VSColorOutput for VS 2017 Released
Quick ReSharper tip for inline templates
NoSQL vs. NewSQL: What's the Difference?
More... (1077)

Donate with PayPal