background-color css
目的:社員のスケジュール表を作りたいです。
出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="?http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j" />
<title>表</title>
<style>
<!--
.open{
background-color:rgb(255,255,255);
}
.holiday{
background-color:rgb(166,166,166);
}
.rest_holiday{
position:relative;
filter:alpha(opacity=50);
background-color:rgb(255,0,0);
}
.rev{
background-color:rgb(185,205,229);
}
-->
</style>
</head>
<body>
<table border="1" cellspacing="1">
<tr>
<td valign="top">
<table border="1" cellspacing="0" width="60" >
<tr align="center">
<td height="23" >名前</td>
</tr>
<tr align="center">
<td ></td>
</tr>
<tr align="center"><td>田中</td></tr>
<tr align="center"><td>島村</td></tr>
<tr align="center"><td>喜田村</td></tr>
<tr align="center"><td>林義夫</td></tr>
</table>
</td>
<td valign="top" >
<table width="00" cellpadding="0" cellspacing="0" border="1">
<tr align="center">
<td width="100" height="23" colspan="2" >10時</td>
<td width="100" height="23" colspan="2">11時</td>
<td width="100" height="23" colspan="2" >12時</td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="open"> </td>
<td width="25" height="23" valign="top" class="open"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="holiday"> </td>
<td width="25" height="23" valign="top" class="holiday"> </td>
<td width="25" height="23" valign="top" class="holiday"> </td>
<td width="25" height="23" valign="top" class="holiday"> </td>
<td width="25" height="23" valign="top" class="holiday"> </td>
<td width="25" height="23" valign="top" class="holiday"> </td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="rev"> </td>
<td width="25" height="23" valign="top" class="rev"> </td>
<td width="25" height="23" valign="top" class="open"> </td>
<td width="25" height="23" valign="top" class="rev"> </td>
<td width="25" height="23" valign="top" class="rev"> </td>
<td width="25" height="23" valign="top" class="open"> </td>
</tr>
<tr >
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rest_holiday"> </td>
<td width="25" height="23" valign="top" class="rev"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
お礼
そのようにしたほうがいいみたいですね。ありがとうございました。