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...
One table to rule them all
Let's try to make the markup a little leaner.
