Course Categories - The Ugly Duckling
While trying to solve the problem of theming "Nested Categories" I had a closer look at the code for that section.
The original code
This is how it looks (this time the theme is Formal White for a change):
File:Course Categories-Original Code.png
And that's the original code:
<html>
<head>
<title>Course Categories - Original Code</title>
<link rel="stylesheet" type="text/css" href="pix/styles_002.css">
<link rel="stylesheet" type="text/css" href="pix/styles.css">
</head>
<body>
Course Categories - Original Code
Course categories
<tbody>
</tbody>
<a href="/course/category.php?id=2">Moodle Features</a>
1
<tbody>
</tbody>
<img class="spacer" src="pix/spacer.gif" alt="" height="10" width="20">
<a href="/course/category.php?id=3">Quizzes</a>
1
<tbody>
</tbody>
<a href="/course/category.php?id=1">Miscellaneous</a>
4
</body>
</html>
Discussion
That's quite a lot of markup for such less text...
- spacer.gif
- lots of tables
- empty table cells (with only one <br>)
- deprecated valign attribute
Now let's start making this ugly duckling into a graceful swan. This time we won't go for a radical approach as with the Site Admin Block before but try instead a stepwise approach to make the code leaner and more manageable.
One table to rule them all
Let's try to make the markup a little leaner. We note that there are three separate tables, each with only one row. So we keep only the outer table definition to make this into one table with three rows:
1. Attempt
That's the code:
<html>
<head>
<title>Course Categories - Mod 1: Only one table</title>
<link rel="stylesheet" type="text/css" href="pix/styles_002.css">
<link rel="stylesheet" type="text/css" href="pix/styles.css">
</head>
<body>
Course Categories - Mod 1: Only one table
Course categories
<tbody>
</tbody>
<a href="http://demo.moodle.org/course/category.php?id=2">Moodle Features</a>
1
<img class="spacer" src="pix/spacer.gif" alt="" height="10" width="20">
<a href="http://demo.moodle.org/course/category.php?id=3">Quizzes</a>
1
<a href="http://demo.moodle.org/course/category.php?id=1">Miscellaneous</a>
4
</body>
</html>
And here's the screenshot:
