html table with slash splitting the leftup cell

Question

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.

Answer 1

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.