Author Topic: HTML table formatting (Read 6940 times)

x16wda · « **on:** January 18, 2015, 01:56 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]

<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 · « **Reply #1 on:** January 18, 2015, 07:52 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]

<!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 [Select]

/*** 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 · « **Reply #2 on:** January 19, 2015, 10:45 AM »

Wow - awesome!!! Much easier to read!

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.

Dirhael · « **Reply #3 on:** January 19, 2015, 11:57 AM »

Wow - awesome!!! Much easier to read!

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.
-x16wda (January 19, 2015, 10:45 AM)

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 · « **Reply #4 on:** January 19, 2015, 07:48 PM »

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

...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 · « **Reply #5 on:** January 19, 2015, 08:26 PM »

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

...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.
-app103 (January 19, 2015, 07:48 PM)

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.

Renegade · « **Reply #6 on:** January 19, 2015, 10:29 PM »

A bit late, this something like this can help: http://www.tablesgen...ator.com/html_tables

Author Topic: HTML table formatting (Read 6940 times)

x16wda

HTML table formatting

Dirhael

Re: HTML table formatting

x16wda

Re: HTML table formatting

Dirhael

Re: HTML table formatting

app103

Re: HTML table formatting

Dirhael

Re: HTML table formatting

Renegade

Re: HTML table formatting