In this how-to, I cover the steps to convert a regular HTML table into a cool looking table with thin borders and a rollover of the current row. In other additional how-to's, this table will be extended to add drag and drop features to the table. In addition, controls are added to remove rows, or move them to the top or bottom of the page.
The rest of the how to takes a deeper dive of each table and explains the tweeks made to each to get to the final product.
HTML Table
To begin with, here is a simple HTML table. The tables stores a list of books in a wishlist. The table includes columns listing the order of the items, the book title, rating, and author. In addition, columns have been included for future UI enhancements. The border has been set to a width of 1 px.
| List Order | Book Title | Rating | Author | Remove | ||
| 1 | Top | Last | Book #1 |  |
John Doe | |
| 2 | Top | Last | Book #2 | |
Jane Doe | |
| 3 | Top | Last | Book #3 | |
Joe Doe | |
| 4 | Top | Last | Book #4 | |
Jill Doe | |
| 5 | Top | Last | Book #5 | |
John Smith | |
| 6 | Top | Last | Book #6 | |
Joe Smith | |
| 7 | Top | Last | Book #7 | |
Jane Smith | |
| 8 | Top | Last | Book #8 | |
Jill Smith |
Table 01
Let the styling begin!!! First, the #table01 rule sets the table width, adds a 1px border, a 20px margin, and sets the background to white. Notice that the border only affects the outer border of the table. Additional rules need to be added to change the interior.
| List Order | Book Title | Rating | Author | Remove | ||
| 1 | Top | Last | Book #1 | |
John Doe | |
| 2 | Top | Last | Book #2 | |
Jane Doe | |
| 3 | Top | Last | Book #3 | |
Joe Doe | |
| 4 | Top | Last | Book #4 | |
Jill Doe | |
| 5 | Top | Last | Book #5 | |
John Smith | |
| 6 | Top | Last | Book #6 | |
Joe Smith | |
| 7 | Top | Last | Book #7 | |
Jane Smith | |
| 8 | Top | Last | Book #8 | |
Jill Smith |
Table 02
The border needs to be added to the interior of the table. So take a look at the #table02 and #table02 td rules. The #table02 td rule adds a border to the interior of the table. Notice the border around each cell. By default, HTML tables have separated cell border model. This adds the spacing to the table cells. To get the result we want, the needs to be set to a collapsed model.
| List Order | Book Title | Rating | Author | Remove | ||
| 1 | Top | Last | Book #1 | |
John Doe | |
| 2 | Top | Last | Book #2 | |
Jane Doe | |
| 3 | Top | Last | Book #3 | |
Joe Doe | |
| 4 | Top | Last | Book #4 | |
Jill Doe | |
| 5 | Top | Last | Book #5 | |
John Smith | |
| 6 | Top | Last | Book #6 | |
Joe Smith | |
| 7 | Top | Last | Book #7 | |
Jane Smith | |
| 8 | Top | Last | Book #8 | |
Jill Smith |
Table 03
To get the thin border result, take the #table02 and tweak it to add the border-collapse property to the rule. The result is #table03 rule. And the result in the display is the thin lined table shown below.
| List Order | Book Title | Rating | Author | Remove | ||
| 1 | Top | Last | Book #1 | |
John Doe | |
| 2 | Top | Last | Book #2 | |
Jane Doe | |
| 3 | Top | Last | Book #3 | |
Joe Doe | |
| 4 | Top | Last | Book #4 | |
Jill Doe | |
| 5 | Top | Last | Book #5 | |
John Smith | |
| 6 | Top | Last | Book #6 | |
Joe Smith | |
| 7 | Top | Last | Book #7 | |
Jane Smith | |
| 8 | Top | Last | Book #8 | |
Jill Smith |
Table 04
With the border fixed, it is time to make the table look a little more attractive. The #table04 rules set column widths, font size and font width. In addition, the border styling has been changed so borders are only around the rows. I did this using classes to different classes to be applied to rows even though you could have used <tr> in this example.
| List Order | Book Title | Rating | Author | Remove | ||
| 1 | Top | Last | Book #1 | |
John Doe | |
| 2 | Top | Last | Book #2 | |
Jane Doe | |
| 3 | Top | Last | Book #3 | |
Joe Doe | |
| 4 | Top | Last | Book #4 | |
Jill Doe | |
| 5 | Top | Last | Book #5 | |
John Smith | |
| 6 | Top | Last | Book #6 | |
Joe Smith | |
| 7 | Top | Last | Book #7 | |
Jane Smith | |
| 8 | Top | Last | Book #8 | |
Jill Smith |
My Thin Table
This is the final styled table defined with the #myTable rules. Everything is the same as before, except a :hover selector added for rows.
Finding just the code I needed to achieve the table seen below was much more difficult that it should have been. Hopefully this will help others out who would like to achieve similar results.
| List Order | Book Title | Rating | Author | Remove | ||
| 1 | Top | Last | Book #1 | |
John Doe | |
| 2 | Top | Last | Book #2 | |
Jane Doe | |
| 3 | Top | Last | Book #3 | |
Joe Doe | |
| 4 | Top | Last | Book #4 | |
Jill Doe | |
| 5 | Top | Last | Book #5 | |
John Smith | |
| 6 | Top | Last | Book #6 | |
Joe Smith | |
| 7 | Top | Last | Book #7 | |
Jane Smith | |
| 8 | Top | Last | Book #8 | |
Jill Smith |
If you have any comments about this page, please post your comments on my blog entry referring to this page.
Here is the source code for the tables and CSS.
thinTable.html (demo)
thinTable.html (source)
1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2:"http://www.w3.org/TR/html4/loose.dtd">
3:<html>
4:<head>
5: <title>CSS Thin Table</title>
6: <meta name="keywords" content="css, html" />
7: <meta name="keywords" content="css, shorthand, margin, padding, html" />
8: <style type="text/css">
9:/* table 01 */
10:#table01 { width:95%; border:1px solid #D9D5BE; margin:10px; background:white; }
11:
12:/* table 02 */
13:#table02 { width:95%; border:1px solid #D9D5BE; margin:10px; background:white; }
14:#table02 td { border:1px solid #D9D5BE; }
15:
16:/* table 03 */
17:#table03 { width:95%; border:1px solid #D9D5BE; margin:10px; background:white; border-collapse:collapse; }
18:#table03 td { border:1px solid #D9D5BE; }
19:
20:/* table 04 */
21:#table04 { width:95%; border:1px solid #D9D5BE; margin:10px; background:white; border-collapse:collapse; font-size:0.8em;}
22:#table04 td { padding:6px;}
23:#table04 .row { border-bottom: 1px solid #D9D5BE; }
24:#table04 .titleRow { border-bottom: 1px solid #D9D5BE; font-weight:bold; font-size:0.8em; color:gray;}
25:#table04 .tdNum { width:9%; text-align:center; }
26:#table04 .tdTop, .tdLast { width:4%; }
27:#table04 .tdTitle { width:43%; }
28:#table04 .tdAuthor { width:16%; }
29:#table04 .tdRating, .tdRemove { width:12%; text-align:center; }
30:
31:
32:/* myTable */
33:#myTable { width:95%; border:1px solid #D9D5BE; border-collapse:collapse; margin:10px; background:white; font-size:0.8em; }
34:#myTable td { padding:6px; }
35:#myTable .titleRow { border-bottom: 1px solid #D9D5BE; font-weight:bold; font-size:0.8em; color:gray;}
36:#myTable .row { border-bottom: 1px solid #D9D5BE; }
37:#myTable .tdNum { width:9%; text-align:center; }
38:#myTable .tdTop, .tdLast { width:4%; }
39:#myTable .tdTitle { width:43%; }
40:#myTable .tdAuthor { width:16%; }
41:#myTable .tdRating, .tdRemove { width:12%; text-align:center; }
42:#myTable .row:hover {background: #EDEDED;}
43:
44: </style>
45:</head>
46:<body>
47:<!-- Main Content goes here -->
48:
49:<!-- html table -->
50:<h3>HTML Table</h3>
51: <table border="1px">
52: <thead>
53: <tr>
54: <td>List Order</td>
55: <td> </td>
56: <td> </td>
57: <td>Book Title</td>
58: <td>Rating</td>
59: <td>Author</td>
60: <td>Remove</td>
61: </tr>
62: </thead>
63: <tbody>
64: <tr>
65: <td>1</td>
66: <td>Top</td>
67: <td>Last</td>
68: <td>Book #1</td>
69: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
70: <td>John Doe</td>
71: <td></td>
72: </tr>
73: <tr>
74: <td>2</td>
75: <td>Top</td>
76: <td>Last</td>
77: <td>Book #2</td>
78: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
79: <td>Jane Doe</td>
80: <td></td>
81: </tr>
82: <tr>
83: <td>3</td>
84: <td>Top</td>
85: <td >Last</td>
86: <td>Book #3</td>
87: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
88: <td>Joe Doe</td>
89: <td></td>
90: </tr>
91: <tr>
92: <td>4</td>
93: <td>Top</td>
94: <td>Last</td>
95: <td>Book #4</td>
96: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
97: <td>Jill Doe</td>
98: <td></td>
99: </tr>
100: <tr>
101: <td>5</td>
102: <td>Top</td>
103: <td>Last</td>
104: <td>Book #5</td>
105: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
106: <td>John Smith</td>
107: <td></td>
108: </tr>
109: <tr>
110: <td>6</td>
111: <td>Top</td>
112: <td>Last</td>
113: <td>Book #6</td>
114: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
115: <td>Joe Smith</td>
116: <td></td>
117: </tr>
118: <tr>
119: <td>7</td>
120: <td>Top</td>
121: <td>Last</td>
122: <td>Book #7</td>
123: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
124: <td>Jane Smith</td>
125: <td></td>
126: </tr>
127: <tr>
128: <td>8</td>
129: <td>Top</td>
130: <td>Last</td>
131: <td>Book #8</td>
132: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
133: <td>Jill Smith</td>
134: <td></td>
135: </tr>
136: </tbody>
137: </table>
138:
139:<h3>Table 01</h3>
140: <p>CSS added to table.</p>
141: <table id="table01">
142: <thead>
143: <tr>
144: <td>List Order</td>
145: <td> </td>
146: <td> </td>
147: <td>Book Title</td>
148: <td>Rating</td>
149: <td>Author</td>
150: <td>Remove</td>
151: </tr>
152: </thead>
153: <tbody>
154: <tr>
155: <td>1</td>
156: <td>Top</td>
157: <td>Last</td>
158: <td>Book #1</td>
159: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
160: <td>John Doe</td>
161: <td></td>
162: </tr>
163: <tr>
164: <td>2</td>
165: <td>Top</td>
166: <td>Last</td>
167: <td>Book #2</td>
168: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
169: <td>Jane Doe</td>
170: <td></td>
171: </tr>
172: <tr>
173: <td>3</td>
174: <td>Top</td>
175: <td >Last</td>
176: <td>Book #3</td>
177: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
178: <td>Joe Doe</td>
179: <td></td>
180: </tr>
181: <tr>
182: <td>4</td>
183: <td>Top</td>
184: <td>Last</td>
185: <td>Book #4</td>
186: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
187: <td>Jill Doe</td>
188: <td></td>
189: </tr>
190: <tr>
191: <td>5</td>
192: <td>Top</td>
193: <td>Last</td>
194: <td>Book #5</td>
195: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
196: <td>John Smith</td>
197: <td></td>
198: </tr>
199: <tr>
200: <td>6</td>
201: <td>Top</td>
202: <td>Last</td>
203: <td>Book #6</td>
204: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
205: <td>Joe Smith</td>
206: <td></td>
207: </tr>
208: <tr>
209: <td>7</td>
210: <td>Top</td>
211: <td>Last</td>
212: <td>Book #7</td>
213: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
214: <td>Jane Smith</td>
215: <td></td>
216: </tr>
217: <tr>
218: <td>8</td>
219: <td>Top</td>
220: <td>Last</td>
221: <td>Book #8</td>
222: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
223: <td>Jill Smith</td>
224: <td></td>
225: </tr>
226: </tbody>
227: </table>
228:
229:<h3>Table 02</h3>
230: <table id="table02">
231: <thead>
232: <tr>
233: <td>List Order</td>
234: <td> </td>
235: <td> </td>
236: <td>Book Title</td>
237: <td>Rating</td>
238: <td>Author</td>
239: <td>Remove</td>
240: </tr>
241: </thead>
242: <tbody>
243: <tr>
244: <td>1</td>
245: <td>Top</td>
246: <td>Last</td>
247: <td>Book #1</td>
248: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
249: <td>John Doe</td>
250: <td></td>
251: </tr>
252: <tr>
253: <td>2</td>
254: <td>Top</td>
255: <td>Last</td>
256: <td>Book #2</td>
257: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
258: <td>Jane Doe</td>
259: <td></td>
260: </tr>
261: <tr>
262: <td>3</td>
263: <td>Top</td>
264: <td >Last</td>
265: <td>Book #3</td>
266: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
267: <td>Joe Doe</td>
268: <td></td>
269: </tr>
270: <tr>
271: <td>4</td>
272: <td>Top</td>
273: <td>Last</td>
274: <td>Book #4</td>
275: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
276: <td>Jill Doe</td>
277: <td></td>
278: </tr>
279: <tr>
280: <td>5</td>
281: <td>Top</td>
282: <td>Last</td>
283: <td>Book #5</td>
284: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
285: <td>John Smith</td>
286: <td></td>
287: </tr>
288: <tr>
289: <td>6</td>
290: <td>Top</td>
291: <td>Last</td>
292: <td>Book #6</td>
293: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
294: <td>Joe Smith</td>
295: <td></td>
296: </tr>
297: <tr>
298: <td>7</td>
299: <td>Top</td>
300: <td>Last</td>
301: <td>Book #7</td>
302: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
303: <td>Jane Smith</td>
304: <td></td>
305: </tr>
306: <tr>
307: <td>8</td>
308: <td>Top</td>
309: <td>Last</td>
310: <td>Book #8</td>
311: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
312: <td>Jill Smith</td>
313: <td></td>
314: </tr>
315: </tbody>
316: </table>
317:
318:
319:<h3>Table 03</h3>
320: <table id="table03">
321: <thead>
322: <tr>
323: <td>List Order</td>
324: <td> </td>
325: <td> </td>
326: <td>Book Title</td>
327: <td>Rating</td>
328: <td>Author</td>
329: <td>Remove</td>
330: </tr>
331: </thead>
332: <tbody>
333: <tr>
334: <td>1</td>
335: <td>Top</td>
336: <td>Last</td>
337: <td>Book #1</td>
338: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
339: <td>John Doe</td>
340: <td></td>
341: </tr>
342: <tr>
343: <td>2</td>
344: <td>Top</td>
345: <td>Last</td>
346: <td>Book #2</td>
347: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
348: <td>Jane Doe</td>
349: <td></td>
350: </tr>
351: <tr>
352: <td>3</td>
353: <td>Top</td>
354: <td >Last</td>
355: <td>Book #3</td>
356: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
357: <td>Joe Doe</td>
358: <td></td>
359: </tr>
360: <tr>
361: <td>4</td>
362: <td>Top</td>
363: <td>Last</td>
364: <td>Book #4</td>
365: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
366: <td>Jill Doe</td>
367: <td></td>
368: </tr>
369: <tr>
370: <td>5</td>
371: <td>Top</td>
372: <td>Last</td>
373: <td>Book #5</td>
374: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
375: <td>John Smith</td>
376: <td></td>
377: </tr>
378: <tr>
379: <td>6</td>
380: <td>Top</td>
381: <td>Last</td>
382: <td>Book #6</td>
383: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
384: <td>Joe Smith</td>
385: <td></td>
386: </tr>
387: <tr>
388: <td>7</td>
389: <td>Top</td>
390: <td>Last</td>
391: <td>Book #7</td>
392: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
393: <td>Jane Smith</td>
394: <td></td>
395: </tr>
396: <tr>
397: <td>8</td>
398: <td>Top</td>
399: <td>Last</td>
400: <td>Book #8</td>
401: <td><img src="images/star_5sm.png" width="80" height="15"/></td>
402: <td>Jill Smith</td>
403: <td></td>
404: </tr>
405: </tbody>
406: </table>
407:
408:
409:<h3>Table 04</h3>
410: <table id="table04">
411: <thead>
412: <tr class="titleRow">
413: <td class="tdNum">List Order</td>
414: <td class="tdTop"> </td>
415: <td class="tdLast"> </td>
416: <td class="tdTitle">Book Title</td>
417: <td class="tdRating">Rating</td>
418: <td class="tdAuthor">Author</td>
419: <td class="tdRemove">Remove</td>
420: </tr>
421: </thead>
422: <tbody class="tableBody">
423: <tr class="row">
424: <td class="tdNum">1</td>
425: <td class="tdTop">Top</td>
426: <td class="tdLast">Last</td>
427: <td class="tdTitle">Book #1</td>
428: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
429: <td class="tdAuthor">John Doe</td>
430: <td class="tdRemove"></td>
431: </tr>
432: <tr class="row">
433: <td class="tdNum">2</td>
434: <td class="tdTop">Top</td>
435: <td class="tdLast">Last</td>
436: <td class="tdTitle">Book #2</td>
437: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
438: <td class="tdAuthor">Jane Doe</td>
439: <td class="tdRemove"></td>
440: </tr>
441: <tr class="row">
442: <td class="tdNum">3</td>
443: <td class="tdTop">Top</td>
444: <td class="tdLast">Last</td>
445: <td class="tdTitle">Book #3</td>
446: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
447: <td class="tdAuthor">Joe Doe</td>
448: <td class="tdRemove"></td>
449: </tr>
450: <tr class="row">
451: <td class="tdNum">4</td>
452: <td class="tdTop">Top</td>
453: <td class="tdLast">Last</td>
454: <td class="tdTitle">Book #4</td>
455: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
456: <td class="tdAuthor">Jill Doe</td>
457: <td class="tdRemove"></td>
458: </tr>
459: <tr class="row">
460: <td class="tdNum">5</td>
461: <td class="tdTop">Top</td>
462: <td class="tdLast">Last</td>
463: <td class="tdTitle">Book #5</td>
464: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
465: <td class="tdAuthor">John Smith</td>
466: <td class="tdRemove"></td>
467: </tr>
468: <tr class="row">
469: <td class="tdNum">6</td>
470: <td class="tdTop">Top</td>
471: <td class="tdLast">Last</td>
472: <td class="tdTitle">Book #6</td>
473: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
474: <td class="tdAuthor">Joe Smith</td>
475: <td class="tdRemove"></td>
476: </tr>
477: <tr class="row">
478: <td class="tdNum">7</td>
479: <td class="tdTop">Top</td>
480: <td class="tdLast">Last</td>
481: <td class="tdTitle">Book #7</td>
482: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
483: <td class="tdAuthor">Jane Smith</td>
484: <td class="tdRemove"></td>
485: </tr>
486: <tr class="row">
487: <td class="tdNum">8</td>
488: <td class="tdTop">Top</td>
489: <td class="tdLast">Last</td>
490: <td class="tdTitle">Book #8</td>
491: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
492: <td class="tdAuthor">Jill Smith</td>
493: <td class="tdRemove"></td>
494: </tr>
495: </tbody>
496: </table>
497:
498:
499:<h3>myTable</h3>
500: <table id="myTable">
501: <thead>
502: <tr class="titleRow">
503: <td class="tdNum">List Order</td>
504: <td class="tdTop"> </td>
505: <td class="tdLast"> </td>
506: <td class="tdTitle">Book Title</td>
507: <td class="tdRating">Rating</td>
508: <td class="tdAuthor">Author</td>
509: <td class="tdRemove">Remove</td>
510: </tr>
511: </thead>
512: <tbody>
513: <tr class="row">
514: <td class="tdNum">1</td>
515: <td class="tdTop">Top</td>
516: <td class="tdLast">Last</td>
517: <td class="tdTitle">Book #1</td>
518: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
519: <td class="tdAuthor">John Doe</td>
520: <td class="tdRemove"></td>
521: </tr>
522: <tr class="row">
523: <td class="tdNum">2</td>
524: <td class="tdTop">Top</td>
525: <td class="tdLast">Last</td>
526: <td class="tdTitle">Book #2</td>
527: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
528: <td class="tdAuthor">Jane Doe</td>
529: <td class="tdRemove"></td>
530: </tr>
531: <tr class="row">
532: <td class="tdNum">3</td>
533: <td class="tdTop">Top</td>
534: <td class="tdLast">Last</td>
535: <td class="tdTitle">Book #3</td>
536: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
537: <td class="tdAuthor">Joe Doe</td>
538: <td class="tdRemove"></td>
539: </tr>
540: <tr class="row">
541: <td class="tdNum">4</td>
542: <td class="tdTop">Top</td>
543: <td class="tdLast">Last</td>
544: <td class="tdTitle">Book #4</td>
545: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
546: <td class="tdAuthor">Jill Doe</td>
547: <td class="tdRemove"></td>
548: </tr>
549: <tr class="row">
550: <td class="tdNum">5</td>
551: <td class="tdTop">Top</td>
552: <td class="tdLast">Last</td>
553: <td class="tdTitle">Book #5</td>
554: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
555: <td class="tdAuthor">John Smith</td>
556: <td class="tdRemove"></td>
557: </tr>
558: <tr class="row">
559: <td class="tdNum">6</td>
560: <td class="tdTop">Top</td>
561: <td class="tdLast">Last</td>
562: <td class="tdTitle">Book #6</td>
563: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
564: <td class="tdAuthor">Joe Smith</td>
565: <td class="tdRemove"></td>
566: </tr>
567: <tr class="row">
568: <td class="tdNum">7</td>
569: <td class="tdTop">Top</td>
570: <td class="tdLast">Last</td>
571: <td class="tdTitle">Book #7</td>
572: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
573: <td class="tdAuthor">Jane Smith</td>
574: <td class="tdRemove"></td>
575: </tr>
576: <tr class="row">
577: <td class="tdNum">8</td>
578: <td class="tdTop">Top</td>
579: <td class="tdLast">Last</td>
580: <td class="tdTitle">Book #8</td>
581: <td class="tdRating"><img src="images/star_5sm.png" width="80" height="15"/></td>
582: <td class="tdAuthor">Jill Smith</td>
583: <td class="tdRemove"></td>
584: </tr>
585: </tbody>
586: </table>
587:
588:</div>
589:<!-- End Main Content -->
590:</body>
591:</html>