Scribd
Upload
2 views

unit-2e-html program

The document discusses improving the readability and appearance of a data table using CSS and JavaScript. It highlights issues such as lack of cell divisions and alignment, and provides code examples for styling the table and implementing alternating row highlights. Additionally, it introduces jQuery for enhancing the table's functionality, including right-aligning numeric cells and applying styles to odd rows.

Uploaded by

dhanapriyad2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

unit-2e-html program

The document discusses improving the readability and appearance of a data table using CSS and JavaScript. It highlights issues such as lack of cell divisions and alignment, and provides code examples for styling the table and implementing alternating row highlights. Additionally, it introduces jQuery for enhancing the table's functionality, including right-aligning numeric cells and applying styles to odd rows.

Uploaded by

dhanapriyad2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Assuring Maximum Readability

The current state of your data table as of Figure 7.5 is that it's
serviceable but not very good-looking. It's a bit difficult to read,
to boot. You can improve these aspects of the table through
some judiciously applied CSS and JavaScript.
Here are some of the issues that it would be good to address in
the current table:
There are no visible divisions between the cells.
There are no large visual distinctions other than font weight
between the headers and the normal cells.
The numeric columns would look better right aligned.
It can be difficult for the eye to travel along a row of the table
without slipping to an adjacent row.

Styling Your Table


Now it's time to pretty things up a bit using the code shown in
Listing 7-4.

Listing 7-4

<!DOCTYPE html>
<html>
<head>
<title>Table With Styled Semantic Markup</title>
<style type="text/css">
/* Remove excess interstitial borders and padding
establish an outer border */
table {
border-collapse: collapse;
border: 1px solid #4C4C4C;(dark gray)
}
/* Add a dotted border around both header cells
and normal cells */
th, td {
border: 1px dotted #707070; (medium gray)
}
/* Add some padding around the header content
removing the cramped spacing. Make the background
color of the headers green. */
th {
background: #C2F0C2;
((padding: 5px;
}
/* Darken the green background for just the column
headers so that they use a different green than the
row headers. The fact that the column headers are
within a thead element helps to discriminate them
from the row headers. */
thead th {
background: #9BC09B;
}
/* Set the background behind the caption to a dark
gray and the caption text to white. */
caption {
background: #4C4C4C;
padding: 5px;
color: white;
}
/* This sets a solid bottom border to just the column
headers. This is achieved by using an attribute selector
to select just the th elements with scope set to col. */
th[scope=col] {
border-bottom: 2px solid #707070;
}
/* This sets a solid right border to just the row headers.
This is achieved by using an attribute selector to
select just the th elements with scope set to row. It
also left aligns these headers */
th[scope=row] {
border-right: 2px solid #707070;
text-align: left;
}
/* This right aligns all the normal cell content and
adds some padding to them */
td {
text-align: right;
padding: 5px;
}
/* This sets a different background to just the row
header that resides in the footer row. */
tfoot th {
background: #BBBBD1;
}
/* This sets a different background to just the
normal cells that reside in the footer row. */
tfoot td {
background: #CFCFDF;
color: #8D1919;
}
</style>
</head>
<body>
<table>
<caption>Sales By Region</caption>
<colgroup>
<col class="col-header">
<col class="col-amount">
<col class="col-mean">
</colgroup>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Sales</th>
<th scope="col">Mean</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Sum</th>
<td>$1,000,000</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Northeast</th>
<td>$100,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southeast</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Midwest</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Mid-Atlantic</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southwest</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Northwest</th>
<td>$100,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">California</th>
<td>$400,000</td>
<td>$142,857</td>
</tr>
</tbody>
</table>
</body>
</html>

You can see the result of Listing 7-4 in Figure 7.7.

Figure 7.7 More comprehensive CSS styling rules have been


applied to the table.
You can find the TableStyling.html file on the companion website.
The table in Figure 7.7 looks much better than earlier versions,
doesn't it?
Increasing Readability
With the styling in place, you've already improved the readability
of the table remarkably, but there is still more that you can do.
Most tables are rendered with horizontal lines between the rows.
These lines help the eye track between cells in the same row and
make it harder for the eye to slip from one row to another.
Another trick that is often used to help the eye scan a table row
is to use alternating row highlights. Here's how you would add
some additional styling rules to achieve this:
tbody tr:nth-child(odd) {
background: #DBDBDB;
}

This rule is a bit dense, so it helps to break it down; sometimes


it helps to deconstruct complicated selectors if you read them
from right to left. The nth-child(odd) bit is saying to select only
odd children (every other child). Then, proceeding a step further
to the left, tr:nth-child(odd) is the instruction to select all odd
children if they are <tr> elements. Take a further step to the left,
and tbody tr:nth-child(odd) is selecting odd children if they are
<tr> elements and they are contained within a <tbody> element.
You can see the results of this in Figure 7.8.
Figure 7.8 Now the table has alternating row highlights.
You can find the TableAlternateRowStyling.html file on the
companion website.
The CSS required to create alternating row highlights actually
turns out to be really concise. The downside, however, is that nth-
child is actually a CSS level 3 selector, so it is only available in
the most modern browsers. Older browsers just ignore the rule,
so this rule still safely and gracefully degrades if someone tries to
view it on a noncompliant browser.
If you drop some of the concision, you can support alternating
highlights on older browsers also. One way of approaching this is
to manually add a class to all the odd rows of the table and then
select on that class directly in order to highlight the odd rows. If
you were generating the table using some code on the server,
this method would be relatively straightforward. You could just
make sure to emit class="odd" for every other row in the markup
generated for the table.
However, there is a distinct downside to approaching this problem
in this way. If you were to use some client-side code to change the
sorting of the rows, you would also need to reassign all the classes
based on the new row order.
Another approach is to use jQuery to manipulate the rows to
implement the alternating row highlights, as shown in Listing 7-5.
One of the benefits of jQuery is that it can help you emulate some
more modern browser features
on older browsers.

Listing 7-5

<!DOCTYPE html>
<html>
<head>
<title>Table With Alternating Row Highlight</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<style type="text/css">
table {
border-collapse: collapse;
border: 1px solid #4C4C4C;
}
th, td {
border: 1px dotted #707070;
}
th {
background: #C2F0C2;
padding: 5px;
}
thead th {
background: #9BC09B;
}
caption {
background: #4C4C4C;
padding: 5px;
color: white;
}
th[scope=col] {
border-bottom: 2px solid #707070;
}
th[scope=row] {
border-right: 2px solid #707070;
text-align: left;
}
td {
padding: 5px;
}
tfoot th {
background: #BBBBD1;
}
tfoot td {
background: #CFCFDF;
color: #8D1919;
}
.row-odd {
background: #DBDBDB;
}
.row-odd th {
background: #A2D0A2;
}
.cell-number {
text-align: right;
}
</style>
<script type="text/javascript">
function usCurrencyToFloat(currency) {
currency = currency.replace(/\$/g, '');
currency = currency.replace(/,/g, '');
return parseFloat(currency);
}
$(function () {
$("tbody").find("tr:odd").addClass("row-odd");
$("tbody").find("td").filter(function (index) {
return !isNaN(usCurrencyToFloat($(this).text()));
}).addClass("cell-number");
});
</script>
</head>
<body>
<table>
<caption>Sales By Region</caption>
<colgroup>
<col class="col-header">
<col class="col-amount">
<col class="col-mean">
</colgroup>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Sales</th>
<th scope="col">Mean</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Sum</th>
<td>$1,000,000</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Northeast</th>
<td>$100,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southeast</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Midwest</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Mid-Atlantic</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southwest</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Northwest</th>
<td>$100,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">California</th>
<td>$400,000</td>
<td>$142,857</td>
</tr>
</tbody>
</table>
</body>
</html>

You can see the result of Listing 7-5 in Figure 7.9.


Figure 7.9 The alternating row highlights in this table were
implemented with jQuery.
You can find the TableAlternateRowStylingJQuery.html file on the
companion website.
Review the new aspects of this sample, starting with the
following:
<script src="jquery/jquery-1.11.1.min.js"></script>

This line of code references jQuery, assuming it has been


downloaded to a subfolder called jQuery, as it is in the code
download from the companion site. It could also be loaded
through its CDN server. For more information on using the
jQuery CDN server see http://jquery.com/download/. You should, of
course, review jQuery's license terms before use.
The following is the next new bit of CSS:
.row-odd {
background: #DBDBDB;
}

This defines a CSS style rule that targets any element that has the
class row- odd. You use jQuery to make sure that the odd rows have
this class assigned. This rule assigns a different background color
to the odd rows so that the background color alternates as you
achieved earlier through the nth-child selector.
Next is the following rule, which targets only <th> elements that
are in odd
rows, coloring their background a darker version of the row
header color.
.row-odd th {
background: #A2D0A2;
}

And then you have this:


.cell-number {
text-align: right;
}

This rule assumes that you'll later use jQuery to assign a class
called cell- number to any cell that appears to contain a number,
in order that they all be right-aligned.
The following is the first actual JavaScript you'll employ to
manipulate the table:
<script type="text/javascript">
function usCurrencyToFloat(currency) {
currency = currency.replace(/\$/g, '');
currency = currency.replace(/,/g, '');
return parseFloat(currency);
}
$(function () {
$("tbody").find("tr:odd").addClass("row-odd");
$("tbody").find("td").filter(function (index) {
return !isNaN(usCurrencyToFloat($(this).text()));
}).addClass("cell-number");
});
</script>

It's pretty concise and straightforward, but here's the


breakdown. The first bit:
function usCurrencyToFloat(currency) {
currency = currency.replace(/\$/g, '');
currency = currency.replace(/,/g, '');
return parseFloat(currency);
}

attempts, through pretty brute force means, to convert the


currency strings in the table cells into floating point numbers.
This is done in order to attempt to identify which cells contain
numbers, so that the style defined earlier can right-align only the
number cells. This is accomplished through removing any dollar
sign characters and commas from the string, and then
parsing the result as a floating point number. If the string
happens to still not be a valid number then parseFloat returns NaN
(Not a number).
Next,
$(function () {
$("tbody").find("tr:odd").addClass("row-odd");
$("tbody").find("td").filter(function (index) {
return !isNaN(usCurrencyToFloat($(this).text()));
}).addClass("cell-number");
});

uses jQuery to invoke some code when the DOM is ready. In the
ready callback, it invokes:
$("tbody").find("tr:odd").addClass("row-odd");

which uses jQuery to find just the odd rows from within the body
of the table and adds the class row-odd to them. Then it calls
$("tbody").find("td").filter(function (index) {
return !isNaN(usCurrencyToFloat($(this).text()));
}).addClass("cell-number");

which finds only cells for which the usCurrencyToFloat function


(discussed earlier in this chapter) returns a valid number, and to
those cells it adds the class cell-number. As previously discussed,
this should ensure that all number columns end up right-aligned.

You might also like