Hiding tables that have no data to display - php

Question

I have this css styling and was wondering what I need to change in order to collapse/hide html tables that are empty.
The style:
<style>
#search_settings
{
position:relative;
height:25px;
width:500px;
}
#users_table_results
{
border-collapse:separate;
empty-cells:hide;
}
#events_table_results
{
border-collapse:separate;
empty-cells:hide;
}
#establishments_table_results
{
border-collapse:separate;
empty-cells:hide;
}
</style>
My HTML:
<div id="search_settings">
<table width="500" border="0">
<tr>
<td height="20" class="heading_text_18">Search results</td>
</tr>
</table>
<table id="users_table_results" max-width="500" name="users" border="0">
<tr>
<td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>"
border="0" height="50" width="50"/></a></td>
<td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td>
<td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td>
<td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td>
</tr>
</table>
<table id="events_table_results" width="500" name="events" border="0">
<tr>
<td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>"
border="0" height="50" width="50"/></a></td>
<td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td>
<td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td>
<td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td>
</tr>
</table>
<table id="establishments_table_results" width="500" name="establishments" border="0">
<tr>
<td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>"
border="0" height="50" width="50"/></a></td>
<td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td>
<td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td>
<td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td>
</tr>
</table>
</div>
I would want it such that if there are no results for my events table, the table does not show(there is no blank space between search results where event results should be because border=0). Can you hide entire tables?

Answer 1

Why not wrap the entire table in a PHP if statement and then use that to check for data and display the table or not?

Answer 2

If you wanted to keep your client side HTML free of server side markup and help keep content and behavior 100% separate, you could use JQuery to hide any tables for which there are no row elements found:
$(document).ready( function() {
$('table').each( function() {
if( $(this).find('tr').length == 0 ) {
$(this).hide();
}
});
});

Answer 3

The best method is to use a server side language like to PHP to generate the required table based on the SQL query. This will result in shorter and more effective code.

Answer 4

If you want to achieve this just using css and your existing code, you could create a new css class called hidden_table and set display to none:
.hidden_table {
display: none;
}
Then in your output, you can determine whether to write the css class of the table as your standard class if there are rows, or you can give the table the class "hidden_table" which will hide the entire table.