HTML table formatting

ATTENTION: You are viewing a page formatted for mobile devices; to view the full web page, click HERE.

Main Area and Open Discussion > General Software Discussion

(1/2) > >>

x16wda:
So I wrote a routine to pull in some basic "who's where" information from our remote desktop boxes, and I've managed to wrap the output in about the most basic table formatting you could find. For the nonce, the info is there and usable, but it's hardly appealing. Would anyone care to take a stab at making it easier on our helpdesk staff's eyes? The border on the cells is nice to differentiate the columns, but it's very busy. The last time I did any HTML, kernel 2.2 was just coming out... things have changed since then!

Here are a few rows from the table:

--- Code: Text ---<head><b>RemoteApp Sessions for 2015/01/18 12:52</b><br><a href="desk.html">Remote Desktop Sessions page</a><br><br>click column header to sort by that column - updated every 2 minutes<script src="sorttable.js"></script></head><body><table class="sortable" border="1"><thead><tr><th>FirstSeen</th><th>Server</th><th>Session</th><th>PID</th><th>User</th><th>Application</th><th>Program</th><th>Parameters</th><th>IP Address</th><th>Computer</th><th>Session ID</th></tr></thead><tbody><tr><td>2015/01/18 11:53</td><td>cotsa4</td><td>RDP-Tcp#0</td><td>5668</td><td>aycockb</td><td>"BJS Client"</td><td>"BJSUSER.EXE"</td><td>''</td><td>111.222.222.195</td><td>CODESK3</td><td>3</td></tr><tr><td>2015/01/18 11:53</td><td>cotsa5</td><td>RDP-Tcp#0</td><td>5720</td><td>aycockb</td><td>"Paint"</td><td>"mspaint.exe"</td><td>''</td><td>(unknown)</td><td>CODESK7</td><td>2</td></tr><tr><td>2015/01/18 11:53</td><td>cotsa5</td><td>RDP-Tcp#0</td><td>5720</td><td>smithr</td><td>"IE"</td><td>"iexplore.exe"</td><td>''</td><td>111.222.111.222</td><td>CODESK7</td><td>2</td></tr></tbody></table></body>

Dirhael:
Besides cleaning up the HTML a bit, what you need is to add some CSS. Here's something I whipped up to get you started...

Fixed (and formatted) HTML:

--- Code: HTML ---<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>RemoteApp Sessions for 2015/01/18 12:52</title> <link rel="stylesheet" href="style.css"></head> <body><h1>RemoteApp Sessions for 2015/01/18 12:52</h1><p><a href="desk.html">Remote Desktop Sessions page</a></p><table class="sortable"> <caption>click column header to sort by that column - updated every 2 minutes</caption> <thead> <tr> <th>FirstSeen</th> <th>Server</th> <th>Session</th> <th>PID</th> <th>User</th> <th>Application</th> <th>Program</th> <th>Parameters</th> <th>IP Address</th> <th>Computer</th> <th>Session ID</th> </tr> </thead> <tbody> <tr> <td>2015/01/18 11:53</td> <td>cotsa4</td> <td>RDP-Tcp#0</td> <td>5668</td> <td>aycockb</td> <td>"BJS Client"</td> <td>"BJSUSER.EXE"</td> <td>''</td> <td>111.222.222.195</td> <td>CODESK3</td> <td>3</td> </tr> <tr> <td>2015/01/18 11:53</td> <td>cotsa5</td> <td>RDP-Tcp#0</td> <td>5720</td> <td>aycockb</td> <td>"Paint"</td> <td>"mspaint.exe"</td> <td>''</td> <td>(unknown)</td> <td>CODESK7</td> <td>2</td> </tr> <tr> <td>2015/01/18 11:53</td> <td>cotsa5</td> <td>RDP-Tcp#0</td> <td>5720</td> <td>smithr</td> <td>"IE"</td> <td>"iexplore.exe"</td> <td>''</td> <td>111.222.111.222</td> <td>CODESK7</td> <td>2</td> </tr> </tbody></table> <script src="sorttable.js" async></script></body></html>
CSS:

--- Code: CSS ---/*** This makes styling of elements consistent between most browsers. I'd recommend adding the content of the @import'ed file to the top of this CSS file, to avoid hitting the github servers every time you load the page! **/@import "https://necolas.github.io/normalize.css/3.0.2/normalize.css"; /*** Styling for your tables follows: ***/body { text-align: center;} h1 { font-size: 1.5em;} table { max-width: 80%; margin: 0 auto; line-height: 2em; text-align: left;} th:before { content: "\21c5"; color: #ccc; margin-right: .2em;} table, th { border: 0;} tr, td { border: 1px solid #eee;} th, td { padding: 0 0.5em;} th { background-color: #545c61; color: #fff;} td { background-color: #fff;} td:nth-child(odd) { background-color: #d3e6f2;} caption { color: #444;}
This will give you something like this:

x16wda:
Wow - awesome!!! Much easier to read! :Thmbsup: :Thmbsup:

Back in the day it was just whip up something by hand... all that newfangled CSS stuff came about after I had quit doing that kind of work. Back when I had a copy of Netscape ready to install, saved on a floppy. :P

Dirhael:
Wow - awesome!!! Much easier to read! :Thmbsup: :Thmbsup:

Back in the day it was just whip up something by hand... all that newfangled CSS stuff came about after I had quit doing that kind of work. Back when I had a copy of Netscape ready to install, saved on a floppy. :P
-x16wda (January 19, 2015, 10:45 AM)
--- End quote ---

Happy to help! :) When I first started making the occasional website, CSS had been introduced, but most websites still had the styling mixed in with the HTML so that's what I did as well. Over time I started playing around with it, and today with CSS 3 (and tools such as Sass) and standards-compliant browsers it's actually quite a bit of fun, very flexible and a whole lot easier than it used to be.

app103:
and a whole lot easier than it used to be.
-Dirhael (January 19, 2015, 11:57 AM)
--- End quote ---

...unless you are trying to make the site responsive. That's still a lot of work if you are not relying on some sort of CSS framework, which I would not use on a single page site of static content.

Navigation

[0] Message Index

[#] Next page

Go to full version