セルにななめの線をひく方法

CSSと画像を使用した記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
td.naname1 { background-image: url('../img/naname1.gif');width:100px;height:100px;border:1px solid #f00; }
td.naname2 { background-image: url('../img/naname2.gif');width:100px;height:100px;border:1px solid #f00; }
-->
</style>
</head>
<body>
<table border="1">
<tr><td class="naname1"> </td><td class="naname2"> </td></tr>
<tr><td class="naname2"> </td><td class="naname1"> </td></tr>
</table>
</body>
</html>

表示サンプル

  
  

解説

テーブルのセルにHTMLやCSSでななめに線をひくことはできません。どうしても実現しようとすれば、セルの大きさ（多少ぶれても良いのであれば大きさにあわす必要なし）に合致し、斜めに線を引いた画像を用意してその画像をセルの背景画像として用いる方法をとる以外に方法はありません。