html table with slash splitting the leftup cell

Question

Hi, I wonder how to write in html a table with slash splitting the leftup cell? i.e., for the leftup cell in the table, there is a diagonal line splitting it into two parts, with some texts on either sides.

Thanks and regards!

Answer 1

Use a background image for the cell imitating the split.

Answer 2

Since HTML is based on box objects, there's no way to achieve this with standard elements.

The simplest way to achieve this, would be to split your cell into three columns, and use a background-image in the middle column which mimics the border-width of your table cell.

This effect can be achieved as follows:

<style type="text/css">
    table {
        border-spacing: 0;
    }

    table tr td {
        border: 1px solid black;

    }

    table .cell-left {
        border-right: 0;
    }

    table .cell-middle {
        border-left: 0;
        border-right: 0;
        background-image: url(slash.png);
        background-position: center center;
    }

    table .cell-right {
        border-left: 0;
    }
</style>

  <table>
      <tr>
          <td class="cell-left">Cell A</td>
          <td class="cell-middle">&nbsp;</td>
          <td class="cell-right">Cell B</td>
      </tr>
  </table>

Note:

• The class names provided are for example purposes only, you will probably want to name them something more "semantically proper"
• An appropriate image will be required, in my testing I created a simple 1-pixel diagonal line (which you are free to use), however you can of course be as creative as you wish. In the example above the background-image is set to align in the absolute center of the cell, this means you can create the image as large as you like in order to scale accordingly.

Answer 3

Two other ideas:

Split the slash image down the half and use it on both sides (you can flip it, save an image)

Don't use tables if you are doing layout... use CSS. Just thought I'd add that in case you were trying to use Photoshop's image slicing or something. Terrible idea.