Home | Blog | Software | Reviews and Features | Forum | Help | Donate | About us
topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • December 04, 2016, 08:34:08 PM
  • Proudly celebrating 10 years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: HTML table formatting  (Read 2009 times)

x16wda

  • Supporting Member
  • Joined in 2007
  • **
  • Posts: 677
  • what am I doing in this handbasket?
    • View Profile
    • Read more about this member.
    • Donate to Member
HTML table formatting
« on: January 18, 2015, 01:56:41 PM »
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 [Select]
  1. <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
  2. <script src="sorttable.js"></script>
  3. </head>
  4. <body>
  5. <table class="sortable" border="1">
  6. <thead>
  7. <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>
  8. </thead>
  9. <tbody>
  10. <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>
  11. <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>
  12. <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>
  13. </tbody>
  14. </table>
  15. </body>

vi vi vi - editor of the beast

Dirhael

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 383
    • View Profile
    • defreitas.no
    • Donate to Member
Re: HTML table formatting
« Reply #1 on: January 18, 2015, 07:52:51 PM »
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 [Select]
  1. <!DOCTYPE html>
  2.         <meta charset="utf-8" />
  3.         <title>RemoteApp Sessions for 2015/01/18 12:52</title>
  4.         <link rel="stylesheet" href="style.css">
  5. </head>
  6.  
  7. <h1>RemoteApp Sessions for 2015/01/18 12:52</h1>
  8. <p><a href="desk.html">Remote Desktop Sessions page</a></p>
  9. <table class="sortable">
  10.         <caption>click column header to sort by that column - updated every 2 minutes</caption>
  11.         <thead>
  12.                 <tr>
  13.                         <th>FirstSeen</th>
  14.                         <th>Server</th>
  15.                         <th>Session</th>
  16.                         <th>PID</th>
  17.                         <th>User</th>
  18.                         <th>Application</th>
  19.                         <th>Program</th>
  20.                         <th>Parameters</th>
  21.                         <th>IP Address</th>
  22.                         <th>Computer</th>
  23.                         <th>Session ID</th>
  24.                 </tr>
  25.         </thead>
  26.         <tbody>
  27.             <tr>
  28.                         <td>2015/01/18 11:53</td>
  29.                         <td>cotsa4</td>
  30.                         <td>RDP-Tcp#0</td>
  31.                         <td>5668</td>
  32.                         <td>aycockb</td>
  33.                         <td>"BJS Client"</td>
  34.                         <td>"BJSUSER.EXE"</td>
  35.                         <td>''</td>
  36.                         <td>111.222.222.195</td>
  37.                         <td>CODESK3</td>
  38.                         <td>3</td>
  39.                 </tr>
  40.                 <tr>
  41.                         <td>2015/01/18 11:53</td>
  42.                         <td>cotsa5</td>
  43.                         <td>RDP-Tcp#0</td>
  44.                         <td>5720</td>
  45.                         <td>aycockb</td>
  46.                         <td>"Paint"</td>
  47.                         <td>"mspaint.exe"</td>
  48.                         <td>''</td>
  49.                         <td>(unknown)</td>
  50.                         <td>CODESK7</td>
  51.                         <td>2</td>
  52.                 </tr>
  53.                 <tr>
  54.                         <td>2015/01/18 11:53</td>
  55.                         <td>cotsa5</td>
  56.                         <td>RDP-Tcp#0</td>
  57.                         <td>5720</td>
  58.                         <td>smithr</td>
  59.                         <td>"IE"</td>
  60.                         <td>"iexplore.exe"</td>
  61.                         <td>''</td>
  62.                         <td>111.222.111.222</td>
  63.                         <td>CODESK7</td>
  64.                         <td>2</td>
  65.                 </tr>
  66.         </tbody>
  67.  
  68. <script src="sorttable.js" async></script>
  69. </body>
  70. </html>

CSS:
Code: CSS [Select]
  1. /*** This makes styling of elements consistent between most browsers.
  2.      I'd recommend adding the content of the @import'ed file to the
  3.      top of this CSS file, to avoid hitting the github servers every
  4.      time you load the page! **/
  5. @import "https://necolas.github.io/normalize.css/3.0.2/normalize.css";
  6.  
  7. /*** Styling for your tables follows: ***/
  8. body {
  9.   text-align: center;
  10. }
  11.  
  12. h1 {
  13.   font-size: 1.5em;
  14. }
  15.  
  16. table {
  17.   max-width: 80%;
  18.   margin: 0 auto;
  19.   line-height: 2em;
  20.   text-align: left;
  21. }
  22.  
  23. th:before {
  24.   content: "\21c5";
  25.   color: #ccc;
  26.   margin-right: .2em;
  27. }
  28.  
  29. table, th {
  30.   border: 0;
  31. }
  32.  
  33. tr, td {
  34.   border: 1px solid #eee;
  35. }
  36.  
  37. th, td {
  38.   padding: 0 0.5em;
  39. }
  40.  
  41. th {
  42.   background-color: #545c61;
  43.   color: #fff;
  44. }
  45.  
  46. td {
  47.   background-color: #fff;
  48. }
  49.  
  50. td:nth-child(odd) {
  51.   background-color: #d3e6f2;
  52. }
  53.  
  54. caption {
  55.   color: #444;
  56. }

This will give you something like this:
tables.png
Registered nurse by day, hobby programmer by night.

x16wda

  • Supporting Member
  • Joined in 2007
  • **
  • Posts: 677
  • what am I doing in this handbasket?
    • View Profile
    • Read more about this member.
    • Donate to Member
Re: HTML table formatting
« Reply #2 on: January 19, 2015, 10:45:18 AM »
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
vi vi vi - editor of the beast

Dirhael

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 383
    • View Profile
    • defreitas.no
    • Donate to Member
Re: HTML table formatting
« Reply #3 on: January 19, 2015, 11:57:01 AM »
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

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.
Registered nurse by day, hobby programmer by night.

app103

  • That scary taskbar girl
  • Global Moderator
  • Joined in 2006
  • *****
  • Posts: 5,666
    • View Profile
    • App's Apps
    • Read more about this member.
    • Donate to Member
Re: HTML table formatting
« Reply #4 on: January 19, 2015, 07:48:01 PM »
and a whole lot easier than it used to be.

...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.

Dirhael

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 383
    • View Profile
    • defreitas.no
    • Donate to Member
Re: HTML table formatting
« Reply #5 on: January 19, 2015, 08:26:40 PM »
and a whole lot easier than it used to be.

...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.

It's can be a lot of work certainly, but if you have the possibility of supporting only mostly modern browsers then it's not nearly as much work as it used to be. There are a lot of great tools available that helps a lot. As you said though, a framework or something like that isn't needed for something such as this.
Registered nurse by day, hobby programmer by night.

Renegade

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 13,220
  • Tell me something you don't know...
    • View Profile
    • Renegade Minds
    • Donate to Member
Re: HTML table formatting
« Reply #6 on: January 19, 2015, 10:29:03 PM »
A bit late, this something like this can help: http://www.tablesgen...ator.com/html_tables
Slow Down Music - Where I commit thought crimes...

Freedom is the right to be wrong, not the right to do wrong. - John Diefenbaker