CODEWITHSUNDEEP
htmlcssxhtml
5ervant - techintel.github.io
5ervant - techintel.github.io

Reputation: 4469

How to Display a Blank Data at an Unexisting Empty `<td>` Element in a Table

I think this question is easy... I want this HTML code of a table:

<table>
  <tr>
    <th>Heading 1</th>
    <td>or</td>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1 of Row 2</td>
    <td>Data 2 of Row 2</td>
  </tr>
  <tr>
    <td>Data 1 of Row 3</td>
    <td>Data 2 of Row 3</td>
  </tr>
</table>

To produce an output as:

Table with Empty <td> Elements

AND NOT as:

Table without Empty <td> Elements

In other words, I want to show it as:

<table>
  <tr>
    <th>Heading 1</th>
    <td>or</td>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1 of Row 2</td>
    <td></td>
    <td>Data 2 of Row 2</td>
  </tr>
  <tr>
    <td>Data 1 of Row 3</td>
    <td></td>
    <td>Data 2 of Row 3</td>
  </tr>
</table>

Even there's no empty <td> elements on my code.. I really didn't want to write a <td> element in a table when it has an empty content.. What attribute (with value) should I use? Should it be style attribute? (I hope it's not!) Is this possible?

Upvotes: 0

Views: 546

Answers (2)

5ervant - techintel.github.io
5ervant - techintel.github.io

Reputation: 4469

I told 'ya, IT'S EASY..

After just using the so called opposite attribute of colspan, named (attribute) rowspan and searching a little bit, and using the alternative supported CSS for unsupported valign attribute in HTML5, this is what I've found:

<table>
  <tr>
    <th>Heading 1</th>
    <td rowspan="3" style="vertical-align: text-top;">or</td>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1 of Row 2</td>
    <td>Data 2 of Row 2</td>
  </tr>
  <tr>
    <td>Data 1 of Row 3</td>
    <td>Data 2 of Row 3</td>
  </tr>
</table>

Test it on any HTML(5) interpreter and see that the output of this HTML code is looks like as:

The Wanted Table in the Question

Even without empty <td> elements in the table. BUT STILL, I wondered if someone knew how to markup a table with the construction like this:

 _________________
|_____|_____|_____|
|_____|     |_____|
|_____|     |_____|

WITHOUT ANY TRICK.. “I think it's quite impossible with HTML alone.”

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

Is the word "or" really important content, or just decoration? Looks kind of odd to me. Here's a cheeky alternative:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
th {position: relative;}
th:first-child:after {
    content: "or";
    position: relative;
    right: -1em;
    top: 0;
}

</style>

</head>
<body>

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1 of Row 2</td>
    <td>Data 2 of Row 2</td>
  </tr>
  <tr>
    <td>Data 1 of Row 3</td>
    <td>Data 2 of Row 3</td>
  </tr>
</table>

</body>
</html>

warning Not tested in IE.

Upvotes: 1

Related Questions