2 x 2 table with inner borders shown only

Hello,
Im trying to style a table so that the inner borders are displayed only, i.e. and plus sign is seen in middle of the table.

The table


<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

I’m not sure how best to approach this - is there a better idea, like nested tables or four divs? How would you do this?

W/o content your question has no right answer.

But probably tables are not what you’re after, if semantic markup is what you have in mind. Tables are for tabular data.

Finally, what you’re asking can be done with both. But you need to start with content.

The data will change from page to page. I will be using a table to display tabular data. If you like, I can add text to the table items but it shouldn’t make any difference to the answer in my opinion.


<table>
<tr><td>Top left</td><td>Top right</td></tr>
<tr><td>Bottom left</td><td>Bottom right</td></tr>
</table>

What properties should I use to display inner borders only (to show a plus sign essentially)?

Try this for tables (you said it is tabular data):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>Table 2x2</title>
  <style type="text/css">

    table {
      border-collapse: collapse;
    }
    
    #topleft, #bottomright {
      border: solid 1px black;
    }
    
    #topleft {
        border-left-style: none;
        border-top-style: none;
    }
    
    #bottomright {
      border-right-style: none;
      border-bottom-style: none;
    }
    
  </style>
</head><body>

   <table cellpadding="0">
     <tr>
      <td id="topleft">
       <p>One</p>
       </td>
      <td>
       <p>Two</p>
       </td>
     </tr>
     <tr>
      <td>
       <p>Three</p>
       </td>
      <td id="bottomright">
       <p>Four</p>
       </td>
     </tr>
    </tbody>
   </table>

</body></html>

Hi again,

That’s great - exactly what I wanted to achieve. Thanks for doing all the work for me!