VPF::Подскажите, как сверстать таблицу

div2div

Дата 15.9.2009, 13:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 15.9.2009

Репутация: нет
Всего: нет

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

Присоединённый файл ( Кол-во скачиваний: 21 )

table_example.png 75,57 Kb

Pitbul

Дата 15.9.2009, 14:09 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

Вот что смог написать=) 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>

--------------------

### JAVA ###### programming ###

div2div

Дата 15.9.2009, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 15.9.2009

Репутация: нет
Всего: нет

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

Pitbul

Дата 15.9.2009, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

Ну с цветами поэксперементировать можно=) Согласен=) 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>

--------------------

### JAVA ###### programming ###

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »