Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как лучше создать вот такую таблицу:

Автор: Muerto 14.7.2011, 12:56

Дело в том что ширина таблички динамическая...

я бы мог три столбика и в ручную прописать... но гемор...

А если как бы верхний слой отдельная таблица, и нижняя отдельно - криво смотриться (ну может с margin padding spacing надо было ещё поиграть...)

Как посоветуйте такое сделать?

Автор: Guedda 14.7.2011, 13:04

Про аттрибут http://htmlbook.ru/html/td/colspan слышали?

Автор: Muerto 14.7.2011, 14:12

Да, но я таблицы создавать умею не в этом дело... вот со стилем как то хромаю...
как вы видите если всё это одна таблица, то слева как бы не должно быть границ... плюс вокруг должно быть 2 пикселя рамка, а внутри 1

Автор: Guedda 14.7.2011, 14:52

В общем, как-то так пока мне видится решение:

Код


<html>
<head>
<title></title>
<style type="text/css">
table td {
    min-width: 100px;
    height: 20px;
}

table td.header {
    border-left: 2px #000 solid;
    border-top: 2px #000 solid;
    border-right: 2px #000 solid;
    background-color: #cfcfcf;
    text-align: right;
}

.top td {
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
}

.bleft {
    border-left: 2px #000 solid;
}

.bright {
    border-right: 2px #000 solid !important;
}

.btop {
    border-top: 2px #000 solid;
}

.bbottom {
    border-bottom: 2px #000 solid !important;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2"></td>
    <td colspan="2" class="header">Иерогрифы</td>
</tr>
<tr class="top">
    <td class="bleft btop"></td>
    <td class="btop"></td>
    <td class="btop"></td>
    <td class="btop bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft"></td>
    <td></td>
    <td></td>
    <td class="bright"></td>
</tr>
<tr class="top">
    <td class="bleft bbottom"></td>
    <td class="bbottom"></td>
    <td class="bbottom"></td>
    <td class="bright bbottom"></td>
</tr>
</table>
</body>
</html>

Автор: SelenIT 14.7.2011, 20:27

Если абстрагироваться от неидеальностей в IE7 и ниже, можно http://jsfiddle.net/pBpzA/3/.

Упс, недосмотрел, что серые палки снаружи тоже нужны... Тогда для хороших браузеров можно http://jsfiddle.net/pBpzA/5/ (правда, тут уже и IE8 начинает выпендриваться), а если нужна "железная" кроссбраузерность — видимо, да, только явным проставлением классов ячейкам...

Автор: Muerto 14.7.2011, 22:33

Guedda, SelenIT, Большое спасибо, я изначально лепил как Guedda, но больно геморно , а второй каротенький то что надо...
Чет не подумал про thead+th , гениально и просто smile

Автор: olldman 15.7.2011, 04:09

Про элемент таблицы <caption> вспомните.

Автор: SelenIT 15.7.2011, 08:47

Цитата(olldman @ 15.7.2011, 04:09

)

элемент таблицы <caption>

olldman, а кроссбраузерного примера его стилизации не подкинете?

Автор: olldman 15.7.2011, 10:31

Цитата(SelenIT @ 15.7.2011, 11:47)

Цитата(olldman @ 15.7.2011, 04:09

)

элемент таблицы <caption>

olldman, а кроссбраузерного примера его стилизации не подкинете?

Почему бы и нет: _http://realtsib.ru/oldman/table_width_caption.html

Автор: Guedda 15.7.2011, 10:34

Цитата(olldman @ 15.7.2011, 11:31

)

Почему бы и нет: _http://realtsib.ru/oldman/table_width_caption.html

Ситуация то в том, что человеку надо, чтобы края заголовка были пристыкованы к изменяющимся по ширине последним двум колонкам ;) А у Вас получается статическая ширина. Поэтому caption тут не подойдет.

Автор: Muerto 15.7.2011, 10:52

Походу пора мне подучить html + css, отстал я smile

Автор: Guedda 15.7.2011, 10:53

Цитата(Muerto @ 15.7.2011, 11:52

)

Походу пора мне подучить html + css, отстал я

Тогда сразу начинай с html5 ) а то html4.01 уже уходит в прошлое ;)

Автор: olldman 15.7.2011, 10:58

Цитата

Ситуация то в том, что человеку надо, чтобы края заголовка были пристыкованы к изменяющимся по ширине последним двум колонкам

- упс, ну тогда простите, правда таких условий в посте ТС я не увидел...

p.s. ну а ширину можно проставить процентами, не проблема.

Автор: SelenIT 15.7.2011, 12:53

olldman, спасибо за пример, но... что в нем делает несемантичный span? ;)

Автор: olldman 15.7.2011, 13:05

Элемент <span> предназначен для определения встроенных элементов документа и служит в основном для выделения части информации внутри других структурных элементов, так что применять к нему определение "семантичность" я бы не стал. Ну а разобрав код примера, думаю, вы поймете как и какой участок иформации он выделяет. smile