Прикрепить футер в табличной вёрстке или просто закрепить нижнюю область

@nb21 · Регистрация: 26.10.2016

Author24 — интернет-сервис помощи студентам

Всем привет!
Нужно сверстать страницу именно в табличном варианте и что бы прижать футер к низу, подскажите пожалуйста как это лучше всего реализовать? Если никак, или это сверх "идиотская" затея, подскажите пожалуйста в таком случае, как еще можно улучшить существующий вариант в плане дизайна и практичности, буду очень признателен за любые ваши советы и рекомендации, спасибо! Задача стоит на ваять некий улучшенный вариант и что бы красиво, но ума не приложу как его улучшить =(

HTML5

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<STYLE>
a{text-decoration:none;}
TABLE {
    font-weight: normal;
    font-size: 8pt;
    border:none;
    border-collapse:collapse;
    border-spacing : 0px;
    left : 0px;
    letter-spacing : 0px;
    right : 0px;
}
BODY {font-family:Arial Cyr, Arial;
    font-weight: normal;
    font-size: 8pt; 
    color: black;
  .table_name {
  border: 3px;
  border-left: 3px solid #83C447;
  border-right: 3px solid #83C447;
  border-bottom: 3px solid #83C447;
  border-top: 3px solid #83C447;
  font-family: "Lucida Grande", sans-serif;
    }
</STYLE>
</head>
<body>
<table width="100%" border=0>
 
 
<TR>
  <TD><img src="logo.jpg" width="50%" height="50%"></TD>
  <TD align="right" width="5%"></TD>
  <TD align="right">
    <table>
    <TR>
      <TD align="left">~MAST_NM~</TD>
    </TR>
    <TR>   
      <TD align="left">ªÄÐÏÎÓ ~MAST_OKPO~</TD>
    </TR>   
    <TR>   
      <TD align="left">Þðèäè÷åñêèé àäðåñ: ~MAST_UADDR~</TD>
    </TR>   
    <TR>   
      <TD align="left">òåë. ~MAST_TEL_FOR_DOC~</TD>
    </TR>   
    <TR>   
      <TD align="left">e-mail: ~MAST_MAIL_FOR_DOC~</TD>
    </TR>
    </table>
  </TD>
</TR>  
</table>
 
<hr color="#83c447" width="100%" size="8">
<div align="center"><font color="#000000" style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: Arial">ÊÎÌÅÐ×ÅÑÊÎÅ ÏÐÅÄËÎÆÅÍÈÅ
îò ~DOC_DT~ 
 
 
</font></div>
 
<table width="100%" border=0 align="center">
 
 
<TR>
  <TD align="left" width="19%">
  <TD align="right" valign="top" width="30%">Äëÿ
  <TD align="left">~FIRM_NM~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">Êîä
  <TD align="left"> ~FIRM_OKPO~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">Àäðåñ
  <TD align="left">~FIRM_UADDR~</TD>
<TR>
  <TD align="left" width="5%">
        <TD align="right"  valign="top">òåë.
        <TD align="left">~FIRM_TEL_FOR_DOC~</TD>
   <TD align="right" width="15%">
 
 
</table>
<table>
  <tr>
    <td height="12%"></td>
  </tr>  
</table>
<table width="100%" class="table_name" border="1">
  <TR>
      <th width="21%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">Ìîäåëü</font></th>
      <th width="10%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">Ìàðêà</font></th>
      <th width="30%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">Îïèñàíèå</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Öåíà ~curr_sign~</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Åä. èçì.</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Øò</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Âñåãî ~curr_sign~</font></th>
  </TR>
</table>
<table width="100%" border="1" bordercolor="#000000">
  <tr bordercolor="#000000" bgcolor="#FFCD9B" border="1"> 
    <th width="21%" valign="middle"><font size="2">Ìîäåëü</font></th>
    <th width="10%" valign="middle" bgcolor="#FFCD9B"><font size="2">Ìàðêà</font></th>
    <th width="30%" valign="middle" bgcolor="#FFCD9B"><font size="2">Îïèñàíèå</font></th>
    <th width="9%" valign="middle"><font size="2">Öåíà ~curr_sign~</font></th>
    <th width="3%" valign="middle"><font size="2">Åä. èçì.</font></th>
    <th width="3%" valign="middle"><font size="2">Øò</font></th>
    <th width="9%" valign="middle"><font size="2">Âñåãî ~curr_sign~</font></th>
  </tr>
  <tr bordercolor="#000000" bgcolor="#C1FFD1"> 
    <th colspan="7" align="left" ><font size="2">~GMSTF_NM~ ~header(GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000" > 
    <td width="21%" valign="middle"><font size="2">~ART~</font></td>
    <td width="10%"><font size="2">~DF2~</font></td>
    <td width="30%"><font size="2">~CMNT~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~pr1~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~ED~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~QTY~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~sumsnds~</font></td>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="19" colspan="7" align="right"><font size="2">Âñåãî:&nbsp ~footer(GMSTF_NM)~~SUM(sumsnds,GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="17" colspan="7" align="right" valign="middle"><font size="2">Âñåãî ïî ïðåäëîæåíèþ:&nbsp ~SUM(sumsnds)~</font></th>
  </tr>
</table>
 
 
 
<td colspan="8"><font size="3"><font style="WIDTH: 21%"
     >Îáùàÿ ñóììà ñîñòàâëÿåò:</font><font  
      style="WIDTH: 78%; BACKGROUND-COLOR: #b0b0b0">  <b>&nbsp;&nbsp;&nbsp;~SUMSLOV~</b> </font> 
 
</body>
</html>

@mrtoxas · 26.10.2016, 11:31

Не понятно:
- где там футтер?
- где доктайп?
- почему windows-1251?
- где закрывающая скобка стиля body?
- что это за <tr> внизу, оторванный от таблицы - это футтер?

Стили, указанные в тэгах - плохо. Тэг <font> устарел.

@nb21 · 26.10.2016, 11:41 **[ТС]**

- футера пока нет, футер должен быть в виде полосы зелёного цвета на которой должен быть текст: тел,е-мейл,адрес.
- доктайп, кодировка и фонт не столь важны, это в интернет не пойдёт, данный шаблон будет работать как шаблон счёт-фактуры в программе, а сама программа не понимает блочную вёрстку, по-этому приходиться так извращаться)

@mrtoxas · 26.10.2016, 13:14

Пробуйте

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Document</title>
  <style type="text/css">
    html,body{
    height:100%;
  }
  </style>
</head>
<body>
  <table height="100%" width="100%" cellspacing="0">
    <tr>
      <td valign="top" height="100%">
        <table border="3" bordercolor="green" cellpadding="5" cellspacing="0" rules="all">
          <tr>
            <th>item1</th>
            <th>item2</th>
            <th>item3</th>
            <th>item4</th>
          </tr>
          <tr>
            <td>item5</td>
            <td>item6</td>
            <td>item7</td>
            <td>item8</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="45px" bgcolor="green">Футтер</td>
    </tr>
  </table>
</body>
</html>

@nb21 · 26.10.2016, 14:43 **[ТС]**

Да отлично, но вопрос почему при печати не выводяться те цвета которые я задал?

Добавлено через 1 минуту
и еще вопрос почему когда задаю

CSS

1	background-image: url(images/bg.jpg);

картинка не появляется?

@mrtoxas · 26.10.2016, 14:47

Картинка не появляется при печати, или на экране?

@nb21 · 26.10.2016, 14:50 **[ТС]**

Картинка не появляется на экране, а вот цвета которые я говорил не появляются на печати, к примеру та зелёная область внизу или ячейки верхнии у меня серого цвета а текст белого, но при печати стандартно фон белый а текст чёрный.

@mrtoxas · 26.10.2016, 14:59

Насчет картинки, покажите код, так сложно сказать. А насчет печати, не сталкивался. Попробуйте указать цвета в hex, rgb или rgba.

@nb21 · 26.10.2016, 15:22 **[ТС]**

Я в стилях прописал вверху, а по-поводу печати странно ведь остальные цвета, рамки доспустим он нормально печатает в зеленом цвете.

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Commercial_offer</title>
  <style>
    html,body{
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    height:100%;
    font-family:Sans-serif;
    font-weight: normal;
    font-size: 8pt; 
    color: black;
  }
    .table_name {
    border: 2px;
    border-left: 2px solid #83C447;
    border-right: 2px solid #83C447;
    border-bottom: 2px solid #83C447;
    border-top: 2px solid #83C447;
    font-family: "Verdana";
  }
 
  </style>
</head>
<body>
<table width="100%" border=0>
 
 
<TR>
  <TD><img src="Comtel_logo.jpg" width="50%" height="50%"></TD>
  <TD align="right" width="5%"></TD>
  <TD align="right">
    <table>
    <TR>
      <TD align="left">~MAST_NM~</TD>
    </TR>
    <TR>   
      <TD align="left">ªÄÐÏÎÓ ~MAST_OKPO~</TD>
    </TR>   
    <TR>   
      <TD align="left">Þðèäè÷åñêèé àäðåñ: ~MAST_UADDR~</TD>
    </TR>   
    <TR>   
      <TD align="left">òåë. ~MAST_TEL_FOR_DOC~</TD>
    </TR>   
    <TR>   
      <TD align="left">e-mail: ~MAST_MAIL_FOR_DOC~</TD>
    </TR>
    </table>
  </TD>
</TR>  
</table>
<hr color="#83c447" width="100%" size="5">
<div align="center"><font color="#000000" style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: Arial">ÊÎÌÌÅÐ×ÅÑÊÎÅ ÏÐÅÄËÎÆÅÍÈÅ<br>
îò ~DOC_DT~ <br>
<br>
 
</font></div>
 
<table width="100%" border=0 align="center">
 
 
<TR>
  <TD align="left" width="19%">
  <TD align="right" valign="top" width="30%">Äëÿ
  <TD align="left">~FIRM_NM~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">Êîä
  <TD align="left"> ~FIRM_OKPO~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">Àäðåñ
  <TD align="left">~FIRM_UADDR~</TD>
<TR>
  <TD align="left" width="5%">
        <TD align="right"  valign="top">òåë.
        <TD align="left">~FIRM_TEL_FOR_DOC~</TD>
   <TD align="right" width="15%">
 
 
</table>
 
<table>
  <tr>
    <td height="12%"></td>
  </tr>  
</table>
<table width="100%" class="table_name" border="3" bordercolor="ffffff">
  <TR>
      <th width="21%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">Ìîäåëü</font></th>
      <th width="10%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">Ìàðêà</font></th>
      <th width="30%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">Îïèñàíèå</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Öåíà ~curr_sign~</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Åä. èçì.</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Øò</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">Âñåãî ~curr_sign~</font></th>
  </TR>
  <tr bordercolor="#ffffff" bgcolor="#83C447"> 
    <th colspan="7" align="left" ><font size="2">~GMSTF_NM~ ~header(GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000" > 
    <td width="21%" valign="middle"><font size="2">~ART~</font></td>
    <td width="10%"><font size="2">~DF2~</font></td>
    <td width="30%"><font size="2">~CMNT~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~pr1~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~ED~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~QTY~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~sumsnds~</font></td>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="19" colspan="7" align="right"><font size="2">Âñåãî:&nbsp ~footer(GMSTF_NM)~~SUM(sumsnds,GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="17" colspan="7" align="right" valign="middle"><font size="2">Âñåãî ïî ïðåäëîæåíèþ:&nbsp ~SUM(sumsnds)~</font></th>
  </tr>
</table>
 
<br/>
 
<td colspan="8"><font size="3"><font style="WIDTH: 21%" 
     >Îáùàÿ ñóììà ñîñòàâëÿåò:</font><font   
      style="WIDTH: 78%; BACKGROUND-COLOR: #b0b0b0">  <b>&nbsp;&nbsp;&nbsp;~SUMSLOV~</b> </font>
       <tr>
      <td height="45px" bgcolor="green"></td>
    </tr>
 
  <table height="50%" width="100%" cellspacing="0">
    <tr>
      <td valign="top" height="100%">
        <table border="3" bordercolor="green" cellpadding="5" cellspacing="0" rules="all">
        </table>
      </td>
    </tr>
    <tr>
      <td height="25px" bgcolor="#83C447"></td>
    </tr>
  </table>
</body>
</html>

@mrtoxas · 26.10.2016, 15:40

Поменяйте color: black на:

CSS

color: #000000;
/* или */
color: rgb(0,0,0);
/* или */
color: rgba(0,0,0,1);

Можно еще в конец стилей попробовать добавить:

CSS

@media print{
 body{
 color: #000000;
}
}

Попробуйте убрать <font>, если программа с css работает нормально.

@nb21 · 26.10.2016, 15:43 **[ТС]**

По-поводу печати разобрался, это настройки браузера, там можно в режиме предварительной печати выбрать (печать графики), и всё заработало. А вот по-поводу картинки так и не отображается, подскажите пожалуйста в чём проблема.

@mrtoxas · 26.10.2016, 15:48

Стиль относительно правильно написан. Только так будет правильнее:

CSS

 html,body{
    height:100%;
}
 body{
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    font-family:Sans-serif;
    font-weight: normal;
    font-size: 8pt; 
    color: black;
  }

Хотя это не решит проблему, но сделайте так.
Путь к картинке правильно указан? В инструментах разработчика не пишется, "не могу найти картинку"?

@nb21 · 26.10.2016, 15:53 **[ТС]**

Неа роли не сыграло, картинка находиться в корне с самим файлом HTML

@mrtoxas · 26.10.2016, 16:47

Тогда

HTML5

  <style>
    body{
       background-image: url(bg.jpg);
    }
  </style>

@nb21 · 26.10.2016, 17:27 **[ТС]**

Заработало, там с размером была проблема, картинка была в самом низу, когда ее в фотошопе повесил наверх сразу появилась. Правда задум не оправдал моих ожиданий, получаеться очень колхозно =(
я просто думал сделать подложку в виде:

Прикрепить футер в табличной вёрстке или просто закрепить нижнюю область

Одно дело такое нарисовать в Иллюстраторе или подогнать в браузере а другое в табличной вёрстке для прайс-листа (

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.10.2016, 11:31	2
	Не понятно: - где там футтер? - где доктайп? - почему windows-1251? - где закрывающая скобка стиля body? - что это за <tr> внизу, оторванный от таблицы - это футтер? Стили, указанные в тэгах - плохо. Тэг <font> устарел. 0

@nb21 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 13
	26.10.2016, 11:41 [ТС]	3
	- футера пока нет, футер должен быть в виде полосы зелёного цвета на которой должен быть текст: тел,е-мейл,адрес. - доктайп, кодировка и фонт не столь важны, это в интернет не пойдёт, данный шаблон будет работать как шаблон счёт-фактуры в программе, а сама программа не понимает блочную вёрстку, по-этому приходиться так извращаться) 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.10.2016, 14:47	6
	Картинка не появляется при печати, или на экране? 0

@nb21 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 13
	26.10.2016, 14:50 [ТС]	7
	Картинка не появляется на экране, а вот цвета которые я говорил не появляются на печати, к примеру та зелёная область внизу или ячейки верхнии у меня серого цвета а текст белого, но при печати стандартно фон белый а текст чёрный. 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.10.2016, 14:59	8
	Насчет картинки, покажите код, так сложно сказать. А насчет печати, не сталкивался. Попробуйте указать цвета в hex, rgb или rgba. 0

@nb21 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 13
	26.10.2016, 15:43 [ТС]	11
	По-поводу печати разобрался, это настройки браузера, там можно в режиме предварительной печати выбрать (печать графики), и всё заработало. А вот по-поводу картинки так и не отображается, подскажите пожалуйста в чём проблема. 0

@nb21 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 13
	26.10.2016, 15:53 [ТС]	13
	Неа роли не сыграло, картинка находиться в корне с самим файлом HTML 0

@nb21 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 13
	26.10.2016, 17:27 [ТС]	15
	Заработало, там с размером была проблема, картинка была в самом низу, когда ее в фотошопе повесил наверх сразу появилась. Правда задум не оправдал моих ожиданий, получаеться очень колхозно =( я просто думал сделать подложку в виде: Одно дело такое нарисовать в Иллюстраторе или подогнать в браузере а другое в табличной вёрстке для прайс-листа ( 0