Красивые таблицы

Сайт от А до Б

Если Вам надоело каждый раз высчитывать ширину колонок таблицы то этот скрипт для Вас.

<!-- Скрипт поместить после тега body -->
<!-- начало скрипта -->  
<!-- необходим gif файл прозрачный 1х1 (здесь названием zero.gif. В архиве он есть. -->
<script language="JavaScript"><!--
function zeroStr(widthZero, heightZero)
{
 // !!!!!!!!!!!!!!!!!!!!!!  gif 1x1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 return "<img border=0 src='zero.gif' width="+widthZero+" height="+heightZero+">";
}

function drawBox(widthBox, fontSize, imgLeft, colorBox, colorPanel, colorText, colorTitle, strText, strTitle)
// widthBox   - ширина рамки
// fontSize   - размер шрифта
// imgLeft    - рисунок в левом верхнем угле 36х36
// colorBox   - цвет рамки
// colorPanel - цвет панели
// colorText  - цвет текста
// colorTitle - цвет текста заголовка
// strText    - текст
// strTitle   - текст заголовка
{
  if (widthBox < 150) widthBox = 150;
  var flagBullet      = true;
  var TBLStr          = "<table border=0 cellspacing=0 width=" + widthBox + " cellpadding=0>";
  var HTMLStr         = "";
  var TITStr          = "";

  if (imgLeft !="") {
    TITStr =
    "<td height=36>"+
     TBLStr+
      "<tr>"+
         "<td width=36 height=36 rowspan=5><img border=0 src='"+imgLeft+"' width=36 height=36></td>"+
         "<td width="+(widthBox-36)+" height=6 colspan=2>"+zeroStr(5,1)+"</td>"+
      "</tr>"+
      "<tr>"+
         "<td width="+(widthBox-36)+" height=24 colspan=2 bgcolor="+colorBox+" align=center><font color="+colorTitle+" face=Verdana size="+fontSize+"><b>"+strTitle+"</b></font></td>"+
      "</tr>"+
      "<tr>"+
         "<td width="+(widthBox-36)+" height=2 bgcolor=#333333>"+zeroStr(1,1)+"</td>"+
         "<td width=4 height=6 rowspan=3 bgcolor="+colorBox+">"+zeroStr(1,1)+"</td>"+
      "</tr>"+
      "<tr>"+
         "<td width="+(widthBox-36)+" height=2 bgcolor=#999999>"+zeroStr(1,1)+"</td>"+
      "</tr>"+
      "<tr>"+
         "<td width="+(widthBox-36)+" height=2 bgcolor=#CCCCCC>"+zeroStr(1,1)+"</td>"+
      "</tr>"+
     "</table>"+
    "</td>"
  }
  else
  {
    TITStr =
    "<td height=31>"+
     TBLStr +
      "<tr>"+
         "<td width="+widthBox+" height=1 colspan=4>"+zeroStr(1,1)+"</td>"+
      "</tr>"+
      "<tr>"+
         "<td width=5 height=30 rowspan=4>"+zeroStr(1,1)+"</td>"+
         "<td width="+(widthBox-5)+" height=24 colspan=3 bgcolor="+colorBox+" align=center><font color="+colorTitle+" face=Verdana size=2><b>"+strTitle+"</b></font></td>"+
      "</tr>"+
      "<tr>"+
         "<td width=3 height=6 rowspan=3 bgcolor="+colorBox+">"+zeroStr(1,1)+"</td>"+
         "<td width="+(widthBox-12)+" height=2 bgcolor=#333333>"+zeroStr(1,1)+"</td>"+
         "<td width=4 height=6 rowspan=3 bgcolor="+colorBox+">"+zeroStr(1,1)+"</td>"+
      "</tr>"+
      "<tr>"+
         "<td width="+(widthBox-12)+" height=2 bgcolor=#999999>"+zeroStr(1,2)+"</td>"+
      "</tr>"+
      "<tr>"+
         "<td width="+(widthBox-12)+" height=2 bgcolor=#CCCCCC>"+zeroStr(1,2)+"</td>"+
      "</tr>"+
     "</table>"+
    "</td>";
  }

  HTMLStr =
   TBLStr+
     "<tr>"+
        TITStr+
     "</tr>"+
     "<tr>"+
        "<td>"+
        TBLStr+
          "<tr>"+
             "<td width=5>"+zeroStr(1,1)+"</td>"+
             "<td width=3 bgcolor="+colorBox+">"+zeroStr(1,1)+"</td>"+
             "<td width="+(widthBox-12)+" bgcolor="+colorPanel+">"+
             "<table border=0 cellpadding=3 width=100% cellspacing=3>"+
               "<tr>"+
                  "<td align=center><font color="+colorText+">"+strText+"</font></td>"+
               "</tr>"+
             "</table>"+
             "</td>"+
             "<td width=4 bgcolor="+colorBox+">"+zeroStr(1,1)+"</td>"+
          "</tr>"+
        "</table>"+
        "</td>"+
     "</tr>"+
     "<tr>"+
        "<td height=3>"+
        TBLStr+
          "<tr>"+
             "<td width=5></td>"+
             "<td width="+(widthBox-5)+" bgcolor="+colorBox+">"+zeroStr(1,3)+"</td>"+
          "</tr>"+
        "</table>"+
        "</td>"+
     "</tr>"+
   "</table>";
  document.write(HTMLStr);
}
--></script>
<!-- конец скрипта -->

<!-- HTML код -->
<script language="JavaScript"><!--
  drawBox(250, 2, "", "#000000", "#FFCC99", "#000000", "#FFFFFF",
    "Красивая таблица,<br>а можно еще й наворотов накрутить.", "ТАБЛИЦА");
//--></script>
<!-- конец кода -->