Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Подскажите, как сверстать таблицу


Автор: div2div 15.9.2009, 13:45
Добрый день.
Подскажите, как лучше сверстать таблицу, представленную на присоединенном изображении?

Автор: Pitbul 15.9.2009, 14:09
Вот что смог написать=) smile 

Код

<html>
<head>
    <title>table</title>
    <style>
    table {
        width: 600px;
        background-color: #58f6ff;
        border-spacing: 0;
        border-color: #000000;
    }
    td {
        padding: 4px;
        background-color: #29cfd7;
        width: 200px;
        border-color: #289ba1;
    }
    th {
        width: 200px;
    }
    </style>
</head>

<body>

<table>

<tr>
<th>Юр услуги</th><th>услуги</th><th>науч деятельность</th>
</tr>
<tr>
<td>мы оказываем...</td><td>Внесудебное...</td><td>Наряду...</td>
</tr>
<tr>
<td>Подхода...</td><td>По договору...</td><td>Експертная...</td>
</tr>

</table>

</body>
</html>

Автор: div2div 15.9.2009, 14:14
Pitbul, спасибо что откликнулись.
Там в таблице есть одна "фича", чтоб ее... Бордеры - градиенты. Плюс, они еще выступают за границы контейнера - родителя.

Автор: Pitbul 15.9.2009, 14:14
Ну с цветами поэксперементировать можно=) Согласен=) smile

Добавлено через 7 минут и 43 секунды
Градиент не знаю как сделать просто в HTML, а вот другое поправил smile 

Код

<html>
<head>
    <title>table</title>
    <style>
    table {
        width: 600px;
        background-color: #58f6ff;
        border-spacing: 0;
        border-color: #000000;
    }
    td {
        padding: 4px;
        background-color: #29cfd7;
        width: 200px;
        border-color: #289ba1;
    }
    th {
        width: 200px;
    }
    th.left {
         border-bottom: none;
    border-top: none;
    border-left: 1px;
        border-right: none;
        padding: 6px;
        background-color: #29cfd7;
        width: 200px;
        border-color: #289ba1;        
    }
    th.right {
         border-bottom: none;
    border-top: none;
    border-left: none;
        border-right: 1px;
        padding: 6px;
        background-color: #29cfd7;
        width: 200px;
        border-color: #289ba1;        
    }
    </style>
</head>

<body>

<table>

<tr>
<th class="left">Юр услуги</th><th>услуги</th><th class="right">науч деятельность</th>
</tr>
<tr>
<td>мы оказываем...</td><td>Внесудебное...</td><td>Наряду...</td>
</tr>
<tr>
<td>Подхода...</td><td>По договору...</td><td>Експертная...</td>
<td> </td><td> </td><td> </td>
</tr>

</table>

</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)