So I’m generating an html table through my php to arrange my content.
Unfortunately, the code is ugly, hard to work with, and as we all know, tables should NEVER EVER be used for layout.
The problem is that based on the content I wanted to put on my page from my database, I couldn’t figure out any other option.
I would prefer to use divs or lists here, but I can’t figure out how best to do it. If the content wasn’t dynamic, it’d be easy, but it’s a little more complicated than that.
Here’s my php:
<?php
$sql = 'SELECT * FROM titles';
$result = $dbh->prepare($sql);
$entries_per_row = 2;
$i = 1;
$j = 1;
foreach ($dbh->query($sql) as $row) {
echo "<table class=\"category_list\">\r\n".
"<tr>\r\n".
"<td colspan=\"".$entries_per_row."\">\r\n".
"<a id=\"sh".$i."\" href=\"#\" class=\"showhide\">-</a> <span class=\"title\">".$row['TitleName']."</span>\r\n".
"</td>\r\n".
"</tr>\r\n";
$sql2 = 'SELECT * FROM categories WHERE TitleID = '.$row['TitleID'];
$rows2 = array();
foreach ($dbh->query($sql2) as $row2) {
$rows2[] = $row2;
}
$rows2 = array_chunk($rows2, $entries_per_row);
foreach ($rows2 as $row2) {
echo "<tr id=\"".$i."tr".$j."\">\r\n";
foreach($row2 as $element) {
if ($element['CategoryName'] != '' && $element['CategorySummary'] != '') {
echo "<td class=\"cat\">\r\n".
"<a class=\"cat_title\" href=\"display.php?cat=".$element['CategoryName']."&page=1\">".$element['CategoryName']."</a><br />\r\n".
"<span class=\"cat_sum\">".$element['CategorySummary']."</span>\r\n".
"</td>\r\n";
}
}
$j = $j + 1;
echo "</tr>\r\n";
}
$i = $i + 1;
echo "</table>\r\n";
}
?>
Here’s the HTML that it outputs (indenting included):
<table class="category_list">
<tr>
<td colspan="2">
<a id="sh1" href="#" class="showhide">-</a> <span class="title">Test Title 1</span>
</td>
</tr>
<tr id="1tr1">
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 1&page=1">Test Category 1</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 2&page=1">Test Category 2</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
</tr>
<tr id="1tr2">
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 3&page=1">Test Category 3</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
</tr>
</table>
<table class="category_list">
<tr>
<td colspan="2">
<a id="sh2" href="#" class="showhide">-</a> <span class="title">Test Title 2</span>
</td>
</tr>
<tr id="2tr3">
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 4&page=1">Test Category 4</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 5&page=1">Test Category 5</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
</tr>
<tr id="2tr4">
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 6&page=1">Test Category 6</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
</tr>
</table>
<table class="category_list">
<tr>
<td colspan="2">
<a id="sh3" href="#" class="showhide">-</a> <span class="title">Test Title 3</span>
</td>
</tr>
<tr id="3tr5">
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 7&page=1">Test Category 7</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 8&page=1">Test Category 8</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
</tr>
<tr id="3tr6">
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 9&page=1">Test Category 9</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
<td class="cat">
<a class="cat_title" href="display.php?cat=Test Category 10&page=1">Test Category 10</a><br />
<span class="cat_sum">This is a test category. It will be deleted soon.</span>
</td>
</tr>
</table>
If anyone can suggest some php code that’ll arrange this correctly using divs or lists, I’d greatly appreciate it!
You can just refactor your HTML code with a very simple technique if you want to use divs instead. Just port every table tag into a div and give it it’s class. If you run across a table tag you think it does not belongs to the “table”, give it another class:
From:
To:
This refactoring is quite easy to do and you only need to change some of the strings in your output routine, the overall routine stays merely the same.