HTML+CSS+JavaScript

В одних строках таблицы текст идет одной стройкой, а в других в две строки. Соответственно, строки получаются разной высоты.

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

А код такой:

<table border="0" width="26%" id="table1" cellspacing="0" cellpadding="0" height="216"> <tr> <td height="36"> <div style="border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0"> <p class="MsoNormal" style="margin-top: 4px; margin-bottom: 4px"> Роботы</div> </td> </tr> <tr> <td height="36"> <div style="border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0"> <p class="MsoNormal" style="margin-top: 4px; margin-bottom: 4px"> Биологическая очистка сточных вод</div> </td> </tr> <tr> <td height="36"> <div style="border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0"> <p class="MsoNormal" style="margin-top: 4px; margin-bottom: 4px"> Экологическая защита населения</div> </td> </tr> <tr> <td height="36"> <div style="border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0"> <p class="MsoNormal" style="margin-top: 4px; margin-bottom: 4px"> Экономика бизнеса</div> </td> </tr> <tr> <td height="36"> <div style="border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0"> <p class="MsoNormal" style="margin-top: 4px; margin-bottom: 4px"> Электрооборудование для водостойких процессов</div> </td> </tr> <tr> <td height="36"> <div style="border-top: 1px solid #C0C0C0; border-bottom: 2px solid #C0C0C0"> <p class="MsoNormal" style="margin-top: 4px; margin-bottom: 4px"> Энергетика приливов</div> </td> </tr> </table>

И высота не выровнялась, и границы друг на друга лезут...
Почему так?

А зачем Вам, извините, такая "матрёшка"?
Ячейка, в ней - див, в диве - параграф, а уже в параграфе - кащеево яйцотекст?
Все Ваши стили для дива и параграфа можно с успехом применить к одной только ячейке.
Это - во-первых.

Во-вторых, НЕ ДОЛЖНО быть в одном коде такого маразма как у Вас:

<td height="36">         <div style="...

НЕ НАДО применять атрибут height, если есть свойство стиля height.
Получается, что див у Вас пользуется сотовым телефоном, а ячейка при этом - флажковым семафором.
Дайте сотовый телефон и ячейке тоже, не обижайте её.
Используйте для всех тегов ОДИНАКОВЫЕ возможности:

<td style="height: 36px">         <div style="...

Браузеру так много легче будет высчитывать линейные размеры элементов на странице.
-------
Конкретно эта Ваша задача решается следующим простейшим способом:

<style> #table1 td {height: 3.2em; border: 1px solid #C0C0C0; border-left: none; border-right: none; padding: 4px 0} </style> <table border="0" style="width: 26%" id="table1" cellspacing="0" cellpadding="0">     <tr><td>Роботы</td></tr>     <tr><td>Биологическая очистка сточных вод</td></tr>     <tr><td>Экологическая защита населения</td></tr>     <tr><td>Экономика бизнеса</td></tr>     <tr><td>Электрооборудование для водостойких процессов</td></tr>     <tr><td>Энергетика приливов</td></tr> </table>

Замечательно получилось! Большое спасибо!

Правда, верхний и нижний разделители вдвое тоньше остальных (Приложение).

Это почему?

Добавьте в стили строку:

#table1 {border: 1px solid #C0C0C0; border-left: none; border-right: none}

Большое спасибо.

Появилась потребность справа нарисовать вертикальную черту на некотором расстоянии от подчеркнутых ячеек таблицы. Я попытался это сделать кодом, приведенным ниже.

Не знаю, правильно ли код составлен синтаксически, но результат он дает не совсем тот, который нужен: верхняя и нижняя горизонтальные серые полосы соединяются с красной вертикальной чертой.

Можно ли эту вертикальную черту отодвинуть ОТ ВСЕХ горизонтальных полос?

<style>  #table1 td {height: 3.2em; border: 1px solid #C0C0C0; border-left: none; border-right: none; padding: 4px 0} #table1 {border: 1px solid #C0C0C0; border-left: none; border-right: none}  </style>  <table border="0" style="width: 26%" id="table1" cellspacing="0" cellpadding="0">      <tr><td>Роботы</td>         <td rowspan="6" style="border-right: 3px solid #FF0000; padding-left: 5px; padding-top: 0px; padding-bottom: 0px">&nbsp;</td></tr>      <tr><td>Биологическая очистка сточных вод</td></tr>      <tr><td>Экологическая защита населения</td></tr>      <tr><td>Экономика бизнеса</td></tr>      <tr><td>Электрооборудование для водостойких процессов</td></tr>      <tr><td>Энергетика приливов</td></tr>  </table>

про корректность синтаксически не говорю (поправят), но работает:

<style>   #table1 td {height: 3.2em; border: 1px solid #C0C0C0; border-left: none; border-right: none; padding: 4px 0}  #table1 {border-collapse: collapse; border: none}   </style>   <table border="0" style="width: 26%" id="table1" cellspacing="0" cellpadding="0">       <tr><td>Роботы</td>          <td rowspan="6" style="border: none; border-right: 3px solid #FF0000; padding-left: 5px; padding-top: 0px; padding-bottom: 0px">&nbsp;</td></tr>       <tr><td>Биологическая очистка сточных вод</td></tr>       <tr><td>Экологическая защита населения</td></tr>       <tr><td>Экономика бизнеса</td></tr>       <tr><td>Электрооборудование для водостойких процессов</td></tr>       <tr><td>Энергетика приливов</td></tr>   </table>

Спасибо!