Оцените качество кода

amator21 · 13.06.2011, 23:35

Точнее хотелось бы узнать, как его можно улучшить. То что это мрак, я догадываюсь. Тренируюсь в создании страниц, взял страничку каталога и попытался сделать такое же с помощью HTML.
Да и вообще хотелось бы узнать, насколько сейчас недопустима табличная верстка.
Очень вас прошу высказать свои коментарии.

Код HTML:

<!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=utf-8" />
<title>Testovoe zadanie</title>
<style type="text/css">
<!--
.text1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-style: normal;
	font-weight: bold;
	color: #000000;
}
.text2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-align: left;
}
.table_1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: 10pt;
	font-weight: normal;
	color: #000000;
	text-align: center;
}
.text3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	text-indent: 5px;
}
.text4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	text-indent: 5px;
}
.color_line {
	background-color: #8f7eb5;
}
.table_head {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.line_left {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000;
}
-->
</style>
</head>

<body>
<table width="900" border="0" align="center" cellpadding="5" cellspacing="0" class="table_head">
  <tr>
    <td><img src="http://savepic.net/1435525.jpg" alt="logo" width="205" height="50"/></td>
    <td style="text-align:right;" class="text1">Трубы гладкостенные пластиковые</td>
  </tr>
</table>
<p>&nbsp;</p>
<table width="900" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td colspan="2" rowspan="4"><img src="http://savepic.net/1419161.jpg" alt="trubi" width="379" height="537" align="left"/></td>
    <td width="14%" height="145"><img src="http://savepic.org/1880992.jpg" alt="truba_2" width="117" height="121"/></td>
    <td width="35%" align="left" class="text2">Труба ПВХ, жестка, гладкая, тяжелая</td>
  </tr>
  <tr>
    <td colspan="2"><table width="360" border="0" cellspacing="0" class="table_1">
      <tr class="color_line">
        <th width="17%" rowspan="2">Код</th>
        <th colspan="2">Диаметр трубы, мм</th>
        <th width="24%" rowspan="2">Длинна, мм</th>
        <th width="25%" rowspan="2">Упаковка, м</th>
      </tr>
      <tr>
        <th width="17%" class="color_line">Внешний</th>
        <th width="17%" class="color_line">Внутренний</th>
      </tr>
      <tr>
        <td>RGD-PP16T</td>
        <td>16</td>
        <td>13,3</td>
        <td>3</td>
        <td>90</td>
      </tr>
      <tr class="color_line">
        <td>RGD-PP20T</td>
        <td>20</td>
        <td>17,2</td>
        <td>3</td>
        <td>75</td>
      </tr>
      <tr>
        <td>RGD-PP25T</td>
        <td>25</td>
        <td>21,7</td>
        <td>3</td>
        <td>60</td>
      </tr>
      <tr class="color_line">
        <td>RGD-PP32T</td>
        <td>32</td>
        <td>28,3</td>
        <td>3</td>
        <td>30</td>
      </tr>
      <tr>
        <td>RGD-PP40T</td>
        <td>40</td>
        <td>35,9</td>
        <td>3</td>
        <td>30</td>
      </tr>
      <tr class="color_line">
        <td>RGD-PP50T</td>
        <td>50</td>
        <td>45,3</td>
        <td>3</td>
        <td>15</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><img src="http://savepic.net/1379225.jpg" alt="truba_3" width="118" height="120"/></td>
    <td class="text2">Труба ПВХ, гибкая, армированная</td>
  </tr>
  <tr>
    <td height="31" colspan="2"><table width="360" border="0" cellpadding="0" cellspacing="0" class="table_1">
      <tr class="color_line">
        <th width="20%" rowspan="2">Код</th>
        <th colspan="2">Диаметр трубы, мм</th>
        <th width="29%" rowspan="2">Упаковка, м</th>
      </tr>
      <tr>
        <th width="26%" class="color_line">Внешний</th>
        <th width="25%" class="color_line">Внутренний</th>
      </tr>
      <tr>
        <td>RGD-FP12/16</td>
        <td>16</td>
        <td>12</td>
        <td>30</td>
      </tr>
      <tr class="color_line">
        <td>RGD-FP16/20</td>
        <td>20</td>
        <td>16</td>
        <td>30</td>
      </tr>
      <tr>
        <td>RGD-FP20/25</td>
        <td>25</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr class="color_line">
        <td>RGD-FP25/32</td>
        <td>32</td>
        <td>25</td>
        <td>30</td>
      </tr>
      <tr>
        <td>RGD-FP32/40</td>
        <td>40</td>
        <td>32</td>
        <td>30</td>
      </tr>
      <tr class="color_line">
        <td>RGD-FP40/50</td>
        <td>50</td>
        <td>40</td>
        <td>30</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td colspan="2" class="text3"><strong> Система гладкостенных пластиковых труб</strong> при-<br />
      меняется для монтажа наружных и внешних элетро-<br />
      проводок. Она состоит из гладкостенных ПВХ труб,<br />
    соединительных коробок, аксессуаров для монтажа.</td>
    <td colspan="2" rowspan="3" class="text4"><strong>Выбор и применение труб производится согласно<br />
    нормативных документов.
      </strong>
      <h2>ПУЭ:</h2>
      <p class="text4"><strong>2.1.33.</strong> Выбор видов электропроводки, выбор<br />
        проводов и кабелей и способа их прокладки следует<br />
      осуществлять в соответствии с табл. 2.1.2.</p>      <table width="360" border="0" cellpadding="0" cellspacing="0" class="table_1">
        <caption align="left">
        Таблица 2.1.2. Выбор видов электропроводок, способов прокладки и<br />
        проводов и кабелей (выдержка).
        </caption>
    
  <tr class="color_line">
    <th>Условия окружающей среды</th>
      <th>Вид электропроводки и способ прокладки</th>
      <th>Провода и кабели</th>
    </tr>
        <tr>
          <td colspan="3" align="center">Скрытые электропроводки</td>
      </tr>
        <tr class="color_line">
          <td>Помещения всех видов
          и наружные установки.</td>
      <td>В неметаллических трубах из сгораемых материалов (несамозатухающий полиэтилен и т. п.). В замкнутых каналах строительных конструкций. Под штукатуркой.</td>
      <td>Незащищенные и защищенные, одно- и
        многожильные провода. Кабели в неметаллической оболочке.</td>
    </tr>
      </table></td>
  </tr>
  <tr>
    <td width="14%" height="132"><img src="http://savepic.org/1857468.jpg" alt="truba_4" width="119" height="120"/></td>
    <td width="37%" class="text2">Труба ПВХ, жесткая, гладкая, легкая</td>
  </tr>
  <tr>
    <td height="151" colspan="2"><table width="360" border="0" cellpadding="0" cellspacing="0" class="table_1">
      <tr>
        <th width="19%" rowspan="2" class="color_line">Код</th>
        <th colspan="2" class="color_line">Диаметр трубы, мм</th>
        <th width="21%" rowspan="2" class="color_line">Длинна, м</th>
        <th width="20%" rowspan="2" class="color_line">Упаковка, м</th>
      </tr>
      <tr>
        <th width="20%" height="32" class="color_line">Внешний</th>
        <th width="20%" class="color_line">Внутренний</th>
      </tr>
      <tr>
        <td>RGD-PP16T</td>
        <td>16</td>
        <td>13,3</td>
        <td>3</td>
        <td>90</td>
      </tr>
      <tr class="color_line">
        <td>RGD-PP20T</td>
        <td>20</td>
        <td>17,2</td>
        <td>3</td>
        <td>75</td>
      </tr>
      <tr>
        <td>RGD-PP25T</td>
        <td>25</td>
        <td>21,7</td>
        <td>3</td>
        <td>60</td>
      </tr>
      <tr class="color_line">
        <td>RGD-PP32T</td>
        <td>32</td>
        <td>28,3</td>
        <td>3</td>
        <td>30</td>
      </tr>
      <tr>
        <td>RGD-PP40T</td>
        <td>40</td>
        <td>35,9</td>
        <td>3</td>
        <td>30</td>
      </tr>
      <tr class="color_line">
        <td>RGD-PP50T</td>
        <td>50</td>
        <td>45,3</td>
        <td>3</td>
        <td>15</td>
      </tr>
    </table></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

**Silver** · 14.06.2011, 06:50

Что эта тема делает в обсуждении сайтов?

vladendark · 14.06.2011, 07:56

плохой код.
Во-первых табличная верстка

. Во-вторых доктайп не соответствует заявленному. В третьих стили раздуты непомерно:

Цитата:

.line_left {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}

прекрасно сокращается до

Цитата:

.line_left {
border-left: 1px solid #000;
}

ну и т.д.

Snig · 16.06.2011, 01:21

Табличная верстка - верстайте сколько угодно, но у нее есть 1 очень огромный минус - плохая структуризация. пройдет примерно месяцев 5 и вы запутаетесь в своей же таблице, потому див - тащит, да и проще им верстать чем таблицами, хотя опыт табличной верстки просто таки - неоценим.

ЦССку- в отдельный файл.

volFernion · 16.06.2011, 07:32

Цитата:

Сообщение от Snig

Табличная верстка - верстайте сколько угодно, но у нее есть 1 очень огромный минус - плохая структуризация. пройдет примерно месяцев 5 и вы запутаетесь в своей же таблице, потому див - тащит, да и проще им верстать чем таблицами, хотя опыт табличной верстки просто таки - неоценим.

ЦССку- в отдельный файл.

Табличная верстка не хрень, хрень - кривые руки.

На данный момент учитывая такие вещи как вертикал алайн в ячейках и многое другое. Имхо оптимальное решение каркас - таблица, все остальное дивы+ контент местами таблицами если имеет табличную структуру.

конкретно по вашем коду начнем с :
.text2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-style: normal;
font-weight: bold;
color: #000000;
text-align: left;
}

Нафига вы дублируете текстовое оформление

Должно быть вот так:

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-style: normal;
font-weight: bold;
color: #000000;
text-align: left;
}

и затем уже в нужных классах задаетет только атрибуты отличные от общих:

тута большой текст будет{
font-size: 26pt;

}

Если делаетет такие классы, то задавайте в названии идентификатор для вас
.color_line {
background-color: #8f7eb5;
}

вот как вы переведете? цветная линия так? А какого цветат то, учтите не только ж вам ее юзать - весртку

.gree_bottom_line {
border: ....;
}

И чет не понял вы что линии бэком задаете? О_о

<table width="900" border="0" align="center" cellpadding="5" cellspacing="0" class="table_head">
<tr>
<td><img src="http://savepic.net/1435525.jpg" alt="logo" width="205" height="50"/></td>
<td style="text-align:right;" class="text1">Трубы гладкостенные пластиковые</td>
</tr>
</table>

Лекго заменить на тег имейдж с флоатом лефт и маргин райт. Оптимизировать ваш код и оптимизировать кароче.

Тут нужна парктика вобщем

Добавлено через 2 минуты

+ линии проще hr делать чем бордерами ячеек - имхо изврат

Snig · 16.06.2011, 08:57

Цитата:

Сообщение от volFernion

Табличная верстка не хрень, хрень - кривые руки.

А я этого не говорил, вообще считаю, что через нее должны пройти все, верстка таблицами очень проста в понимании и сложнее чем дивы в реализации.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Оцените пожалуйста качество сайта анекдотов	fghjk	Скамейка запасных	7	10.07.2012 10:41
Оцените перспективность проекта и качество реализации	zaxa	Скамейка запасных	10	25.12.2007 09:59
Zend просмотр кода?	Владислав	ASP, Perl, PHP и MySQL	6	10.07.2006 10:30
Вывод кода....	candy_man	ASP, Perl, PHP и MySQL	12	21.04.2006 02:53
Оптимизация кода!	FantomaniA	Технологии Flash	6	17.03.2005 18:27

14.06.2011, 06:50	#2
Silver	Что эта тема делает в обсуждении сайтов?

16.06.2011, 01:21	#4
Snig	Табличная верстка - верстайте сколько угодно, но у нее есть 1 очень огромный минус - плохая структуризация. пройдет примерно месяцев 5 и вы запутаетесь в своей же таблице, потому див - тащит, да и проще им верстать чем таблицами, хотя опыт табличной верстки просто таки - неоценим. ЦССку- в отдельный файл.

13.06.2011, 23:35
Ссылки