Don't P When You TD

This post is more than 18 months old. Since technology changes too rapidly, this content may be out of date (but that's not always the case). Please remember to verify any technical or programming information with the current release.

Despite the “catchy” title, this is one of my pet-peeves: when developers put a p tag inside of a table like they would use a <tr><td> combo. This is often done when there is a variable amount of values - including zero - listed in a table.

What am I talking about? Things like this:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <p>There are no results.</p>
</table>

or

<table>
  <p>No results.</p>
</table>

or

<ul>
 <p>There are no results.</p>
</ul>

or even worse sometimes:

<ul>
 <li class="no-results">There are no results.</li>
</ul>

Please stop creating the listing structure before you know if you have results.

You’ll find this commonly in PHP like this:

<?php
echo "<ul>";
if (empty($results)) {
  echo "<p>There are no results.</p>";
}
else {
  foreach ($results as $result) {
    echo "<li>" . $result . "</li>";
  }
}
echo "</ul>";

I’ve even seen something like this in Vue (which is absolutely against even the recommendations in the manual.)

<ul>
  <li v-for="item in items">
    
   </li>
   <p v-if="!items.length">
    There are none.
  </p>
</ul>

This is just sloppy and wrong. Do not include p tags or make some special listing element if your items are empty. Instead, solve this problem before hand.

For the PHP example, you’d do it like this:

<?php
if (empty($results)) {
  echo "<p>There are no results.</p>";
} else {
  echo "<ul>";
  else {
    foreach ($results as $result) {
      echo "<li>" . $result . "</li>";
    }
  }
}

For Vue:

<ul v-if="items.length">
  <li v-for="item in items">
    
   </li>
</ul>
<p v-else>
  There are none.
</p>

Simple! These simple bits of attention to detail are what will elevate you above the standard programmer. And, it won’t bother me if I happen to see the code, either!

Return to All Posts