Верстка таблиц

**AlexaP** · 22.02.2007, 13:53

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

**garA** · 22.02.2007, 15:09

Вторая таблица вообще не получается.

Да, уж.. Интересная таблица..

"Одной таблицей" у меня получилось так: я прикрепил файл :blush2:
Если интересно код такой:

Код:

<!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=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
table{
****border:solid 1px #000;
}
td{
****border:solid 1px #000;
****width:100px;
}
</style>
</head>

<body>
<table cellspacing="0" summary="Описание вашей таблицы">
****<tr>
 *<td rowspan="2" colspan="2">1</td>
 *<td colspan="4">2</td>
****</tr>
****<tr>
 *<td>3</td>
 *<td>4</td>
 *<td rowspan="3">5</td>
 *<td rowspan="2">6</td>
****</tr>
****<tr>
 *<td>7</td>
 *<td rowspan="2" colspan="2">8</td>
 *<td rowspan="2">9</td> *
****</tr>
****<tr>
 *<td>10</td>
 *<td>11</td>
****</tr>
</table>
</body>
</html>

Теперь по поводу 1-ой таблицы: внимательно посмотрите приведенный выше код и тогда все станет понятно..

P.S. У кого получиться сверстать таблицу, как в оригинале?

**Aykroyd** · 22.02.2007, 15:23

Originally posted by AlexaP@Feb 22 2007, 13:53
Первую таблицу написать могу, только проблемы с бордюром.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Какие именно проблемы с бордюром?

<div class='quotetop'>Цитата</div>

P.S. У кого получиться сверстать таблицу, как в оригинале? smile.gif[/b]

У меня получится...

Код:

<style type="text/css">
table {width: 600px; border: 1px solid #000000;}
td {text-align: center; border: 1px solid #000000;}
</style>

Код:

<table border="1" cellspacing="0" cellpadding="0">
<col span="6" width="100">
 *<tr>
 * *<td rowspan="2" colspan="2">1 ячейка (width="200")</td>
 * *<td colspan="4">2 ячейка (width="400")</td>
 *</tr>
 *<tr>
 * *<td>3 ячейка (width="100")</td>
 * *<td>4 ячейка (width="100")</td>
 * *<td rowspan="3">5 ячейка (width="100")</td>
 * *<td rowspan="2">6 ячейка (width="100")</td>
 *</tr>
 *<tr>
 * *<td>7 ячейка (width="100")</td>
 * *<td rowspan="2" colspan="2">8 ячейка (width="200")</td>
 * *<td rowspan="2">9 ячейка (width="100")</td>
 *</tr>
 *<tr>
 * *<td>10 ячейка (width="100")</td>
 * *<td>11 ячейка (width="100")</td>
 *</tr>
</table>

**garA** · 22.02.2007, 15:57

У меня получится... wink.gif

Действительно, получлось..

У меня такой же код, но результат немного другой..

Стал разбираться..
Причина: отсутствие

Код:

<col span="6" width="100">

Я вставил эту строку в свой код.. Заработало, как надо!
Я попробовал вместо этой строки написать аналогичную строку:

Код:

<col span="6" style="width:100px;">

и тоже работает..
отсюда вопрос: Почему?! :blush2:
У меня же в стилях прописано, что для всех ячеек ширина должна быть равна 100px

**Aykroyd** · 22.02.2007, 16:12

Originally posted by garA@Feb 22 2007, 15:57
отсюда вопрос: Почему?!* :blush2:
У меня же в стилях прописано, что для всех ячеек ширина должна быть равна 100px
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Ответить честно?

Наверное, потому что неисповедимы пути Господни...

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

**garA** · 22.02.2007, 17:07

Наверное, потому что неисповедимы пути Господни...

Наверное..

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

Раньше без группировки как-то обходился, хотя таблицы были аналогичного уровня сложности..
Ну, да и ладно..
Теперь буду иметь в виду.. Как говорят, век живи- век учись!

**AlexaP** · 22.02.2007, 17:22

Aykroyd спасибо. Благодаря COL, удалось построить первую таблицу.

Код:

<TABLE WIDTH="600" BORDER="1" FRAME="hsides" RULES="groups">
<COLGROUP><COL ALIGN="left"></COLGROUP>
<COLGROUP><COL ALIGN="center"><COL ALIGN="center"></COLGROUP>
<COLGROUP SPAN="2" ALIGN="center"></COLGROUP>
<COLGROUP ALIGN="right"><COL ALIGN="right"></COLGROUP>
<THEAD>
 *<TR>
 * *<TH></TH>
 * *<TH>Заголовок</TH>
 * *<TH>Заголовок</TH>
 * *<TH>Заголовок</TH>
 * *<TH>Заголовок</TH>
 * *<TH>Заголовок</TH>
 *</TR>
</THEAD>
<TFOOT>
 *<TR>
 * *<TH>Заголовок</TH>
 * *<TD>11</TD>
 * *<TD>12</TD>
 * *<TD>13</TD>
 * *<TD>14</TD>
 * *<TD>15</TD>
 *</TR>
</TFOOT>
<TBODY>
 *<TR>
 * *<TH>Заголовок</TH>
 * *<TD>1</TD>
 * *<TD>2</TD>
 * *<TD>3</TD>
 * *<TD>4</TD>
 * *<TD>5</TD>
 *</TR>
 *<TR>
 * *<TH>Заголовок</TH>
 * *<TD>6</TD>
 * *<TD>7</TD>
 * *<TD>8</TD>
 * *<TD>9</TD>
 * *<TD>10</TD>
 *</TR>
</TBODY>
</TABLE>

:blush2: Дело в том, что эти задания взял с другого форума, но там сейчас нет человека, который ведет эти уроки и когда будет незнают. Может сможешь дальше объяснить? :blush2:
Про CSS там еще не говорили, но как я понял (если правильно), то задания требуют знания CSS. Вот, что имею ввиду. Полностью третье задание - это построить таблицу по картинке и сделать ее отображение одинаковым в трех обозревателях. Отображаться должно везде, как в Opera 9.10.

**Aykroyd** · 22.02.2007, 20:08

Скучные задания...

Дело в том, что FF почему-то не понимает атрибута align для элементов группировки столбцов...

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN"
"http://www.w3.org/tr/html4/loose.dtd">
<html>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
table {width: 600px; border-collapse: collapse; border-color: #000000;}
th, td {border-color: #000000; text-align: center;}
.lft {text-align: left;}
.rgt {text-align: right;}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="0" frame="hsides" rules="groups">
<colgroup></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<colgroup></colgroup>
<thead>
 *<tr>
****<th></th>
****<th>Заголовок</th>
****<th>Заголовок</th>
****<th>Заголовок</th>
****<th>Заголовок</th>
****<th class="rgt">Заголовок</th>
 *</tr>
</thead>
<tfoot>
 *<tr>
****<th class="lft">Заголовок</th>
****<td>11</td>
****<td>12</td>
****<td>13</td>
****<td>14</td>
****<td class="rgt">15</td>
 *</tr>
</tfoot>
<tbody>
 *<tr>
****<th class="lft">Заголовок</th>
****<td>1</td>
****<td>2</td>
****<td>3</td>
****<td>4</td>
****<td class="rgt">5</td>
 *</tr>
 *<tr>
****<th class="lft">Заголовок</th>
****<td>6</td>
****<td>7</td>
****<td>8</td>
****<td>9</td>
****<td class="rgt">10</td>
 *</tr>
</tbody>
</table>
</body>
</html>

**AlexaP** · 22.02.2007, 22:44

Скучные задания

Для кого как. Может для тех, кто это прошёл, но я только начинаю. И подобных уроков не видел.
Всеравно, спасибо за помощь.
Теперь нужно разобраться с CSS.

**Aykroyd** · 22.02.2007, 23:18

Всеравно, не за что.

Удачи Вам в дальнейших познаниях...

**Zigzag** · 23.02.2007, 12:29

Originally posted by AlexaP@Feb 22 2007, 20:44
Для кого как. Может для тех, кто это прошёл, но я только начинаю. И подобных уроков не видел.
Всеравно, спасибо за помощь.
Теперь нужно разобраться с CSS.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

самое главное понять, что CSS используется не только для оформления текста, так я сам когда-то думал

**Aykroyd** · 23.02.2007, 15:29

Originally posted by Zigzag@Feb 23 2007, 12:29
самое главное понять, что CSS используется не только для оформления текста, так я сам когда-то думал*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
О да...

<div class='quotetop'>Цитата</div>

CSS – это не смешной синтаксис, который придумали для того, чтобы убрать подчеркивания ссылок...[/b]

**AlexaP** · 24.02.2007, 13:13

Появилась куча вопросов.
Если давать такое объявление (думаю правильно сказал)

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" .......>

то все теги нужно закрывать, что увеличит код.
Если такое

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN"
........>

то код будет заметно меньше. Ведь можно не закрывать все теги.

Какое объявление лучше использовать?

P.S. форум не пропускает ссылки в коде.

**Zigzag** · 24.02.2007, 18:47

Originally posted by AlexaP@Feb 24 2007, 11:13
Появилась куча вопросов.
Если давать такое объявление (думаю правильно сказал)

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" .......>

то все теги нужно закрывать, что увеличит код.
Если такое

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN" ........>

то код будет заметно меньше. Ведь можно не закрывать все теги.

Какое объявление лучше использовать?

P.S. форум не пропускает ссылки в коде.*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

в первом случае вы объявляете XHTML, который является подмножеством языка XML, а в XML необходимо закрытие всех тэгов, даже тех, у которых нет закрывающей части. такие тэги закрываются вот так

Код:

<input /> *<img />

и т.д.

вот здесь про XHTML почитай

[Только зарегистрированные пользователи могут видеть ссылки. ]

**Zigzag** · 24.02.2007, 19:02

и, кстати, лично я советую остановиться на XHTML, а не на HTML, т.к. за XML будущее, и оно более ясное и перспективное с XHTML 2.0, чем с HTML 5.0

**AlexaP** · 25.02.2007, 00:07

Zigzag, я не против остановиться на XHTML если научишь.
Вот очередной вопрос. Есть код, к нему нет доступа, только CSS.

Код:

<table border="0" width="100%" bgcolor="#FFFFFF" cellspacing="1" cellpadding="3" class="gTable">
****<tr>
 *<td class="gTableTop" colspan="5">Тестовый раздел</td>
****</tr>
****<tr>
 *<td width="5%" class="gTableSubTop"></td>
 *<td class="gTableSubTop">Форум</td>
 *<td width="8%" class="gTableSubTop" align="center">Темы</td>
 *<td width="8%" class="gTableSubTop" align="center">Ответы</td>
 *<td width="30%" class="gTableSubTop">Обновления</td>
****</tr>
****<tr>
 *<td class="forumIcoTd" align="center">[img].........[/img]</td>
 *<td class="forumNameTd">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
 *<td class="forumThreadTd" align="center">0</td>
 *<td class="forumPostTd" align="center">0</td>
 *<td class="forumLastPostTd">Нет сообщений</td>
****</tr>
</table>

Можно средствами CSS придать этой таблице такой вид как на картинке, или похожий?

**Aykroyd** · 25.02.2007, 10:27

Originally posted by AlexaP@Feb 24 2007, 13:13
Появилась куча вопросов.
Какое объявление лучше использовать?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]А вот у меня здесь прямо противоположное мнение по отношению к мнению Zigzag-а (это, наверное, единственное расхождение в наших с ним взглядах... во всем остальном мы на 100% солидарны

). Лично я предпочитаю чистый HTML:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

И поверьте, причина этого кроется совсем не в обязательном закрытии тэгов в XHTML. Я настоятельно рекомендую Вам закрывать все тэги даже при использовании HTML (конечно же, за исключением "пустых" элементов, для которых закрывающий тэг попросту запрещен). Причина моего предпочтения заключается в элементарной целесообразности и подробно освещается вот [Только зарегистрированные пользователи могут видеть ссылки. ]. Есть, конечно, определенные ситуации, когда использование XHTML весьма оправдано. Но эти ситуации на мой взгляд – весьма редкое явление для большинства повседневных проектов...

Originally posted by AlexaP@Feb 25 2007, 00:07
Есть код, к нему нет доступа, только CSS.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Где CSS?

Originally posted by AlexaP@Feb 25 2007, 00:07
Можно средствами CSS придать этой таблице такой вид как на картинке, или похожий?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Можно.

**Zigzag** · 25.02.2007, 15:03

Originally posted by AlexaP@Feb 24 2007, 22:07
Zigzag, я не против остановиться на XHTML если научишь.
Вот очередной вопрос. Есть код, к нему нет доступа, только CSS.
...
Можно средствами CSS придать этой таблице такой вид как на картинке, или похожий?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

1. к сожалению, времени заниматься обучением у меня нет. все в ваших руках.
2. т.е. вы не можете изменять сам файл html и хотите представленный код переопределить візуально через CSS?

**AlexaP** · 25.02.2007, 15:40

к сожалению, времени заниматься обучением у меня нет. все в ваших руках.

Спасибо - все так говорят

.

т.е. вы не можете изменять сам файл html и хотите представленный код переопределить візуально через CSS?

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

Можно.

Полностью как на картинке?
Я взял часть (не полностью), к которой нет доступа. Создал файл на компе и пробую сделать как на картинке. Вот код

Код:

<?xml version="1.0" encoding="WINDOWS-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "................">
<html xmlns="..............................." xml:lang="ru" lang="ru">
<head>
<title>Форум</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Script-Type" content="text/javascript">
 <style type="text/css">
.gTable { border-collapse: collapse; border-color: #000000; background-image: url(1.gif); background-repeat: no-repeat; }
.gTableTop{ background-image: url(2.gif); background-position: right; background-repeat: no-repeat; height: 38px; color: #ffffff; }
.gTableSubTop{ background: #81d075; }
.forumIcoTd{ background-color: #e0ffd9; background-image: url(3.gif); background-position: bottom; background-repeat: repeat-x; }
.forumNameTd{ background-color: #e0ffd9; background-image: url(3.gif); background-position: bottom; background-repeat: repeat-x; }
.forumThreadTd{ background-color: #e0ffd9; background-image: url(3.gif); background-position: bottom; background-repeat: repeat-x; }
.forumPostTd{ background-color: #e0ffd9; background-image: url(3.gif); background-position: bottom; background-repeat: repeat-x; }
.forumLastPostTd{ background-color: #e0ffd9; background-image: url(3.gif); background-position: bottom; background-repeat: repeat-x; }
</style>
</head>
<body>
<h1>Форум</h1>
<h2>Пробное оформление форума</h2>
<table border="0" width="100%" bgcolor="#FFFFFF" cellspacing="1" cellpadding="3" class="gTable">
****<tr>
 *<td class="gTableTop" colspan="5">Тестовый раздел</td>
****</tr>
****<tr>
 *<td width="5%" class="gTableSubTop"></td>
 *<td class="gTableSubTop">Форум</td>
 *<td width="8%" class="gTableSubTop" align="center">Темы</td>
 *<td width="8%" class="gTableSubTop" align="center">Ответы</td>
 *<td width="30%" class="gTableSubTop">Обновления</td>
****</tr>
****<tr>
 *<td class="forumIcoTd" align="center">[img]im.gif[/img]</td>
 *<td class="forumNameTd">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
 *<td class="forumThreadTd" align="center">0</td>
 *<td class="forumPostTd" align="center">0</td>
 *<td class="forumLastPostTd">Нет сообщений</td>
****</tr>
</table>






</body>
</html>

А вот, что у меня получается
P.S. ирония неуместна.

**AlexaP** · 25.02.2007, 15:44

Попытаюсь дать картинки которые использую.

Тема: Верстка таблиц

Опции темы

Поиск по теме

Отображение

Похожие темы

MySQL. Объединение таблиц

Как добиться такого же результата без таблиц?

печать таблиц

Проблемы с отображением таблиц в IE

Как сделать рамку однопиксельную для таблиц?

Ваши права