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

Вид для печати

Показывать 40 сообщений этой темы на одной странице

22.02.2007, 13:53
AlexaP

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

Цитата:

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

Да, уж.. Интересная таблица.. [Only registered and activated users can see links. Click Here To Register...] "Одной таблицей" у меня получилось так: я прикрепил файл :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. У кого получиться сверстать таблицу, как в оригинале? [Only registered and activated users can see links. Click Here To Register...]
22.02.2007, 15:23
Aykroyd

Цитата:

Originally posted by AlexaP@Feb 22 2007, 13:53
Первую таблицу написать могу, только проблемы с бордюром.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Какие именно проблемы с бордюром? [Only registered and activated users can see links. Click Here To Register...]

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

Цитата:

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

У меня получится... [Only registered and activated users can see links. Click Here To Register...]

Код:

<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>
22.02.2007, 15:57
garA

Цитата:

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

Действительно, получлось.. [Only registered and activated users can see links. Click Here To Register...]
У меня такой же код, но результат немного другой.. :suicide2: Стал разбираться..
Причина: отсутствие

Код:

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

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

Код:

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

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

Цитата:

Originally posted by garA@Feb 22 2007, 15:57
отсюда вопрос: Почему?!* :blush2:
У меня же в стилях прописано, что для всех ячеек ширина должна быть равна 100px
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Ответить честно? [Only registered and activated users can see links. Click Here To Register...]
Наверное, потому что неисповедимы пути Господни...

Таблица сложная... Вот и подумалось, что без использования одного из элементов группировки столбцов здесь не обойтись... В общем, не стилями едиными... [Only registered and activated users can see links. Click Here To Register...]
22.02.2007, 17:07
garA

Цитата:

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

Наверное.. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

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

Раньше без группировки как-то обходился, хотя таблицы были аналогичного уровня сложности..
Ну, да и ладно..
Теперь буду иметь в виду.. Как говорят, век живи- век учись! [Only registered and activated users can see links. Click Here To Register...]
22.02.2007, 17:22
AlexaP

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.
22.02.2007, 20:08
Aykroyd

Скучные задания... [Only registered and activated users can see links. Click Here To Register...]
Дело в том, что 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>
22.02.2007, 22:44
AlexaP

Цитата:

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

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

Всеравно, не за что. [Only registered and activated users can see links. Click Here To Register...]
Удачи Вам в дальнейших познаниях...
23.02.2007, 12:29
Zigzag

Цитата:

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

[/quote]

самое главное понять, что CSS используется не только для оформления текста, так я сам когда-то думал [Only registered and activated users can see links. Click Here To Register...]
23.02.2007, 15:29
Aykroyd

Цитата:

Originally posted by Zigzag@Feb 23 2007, 12:29
самое главное понять, что CSS используется не только для оформления текста, так я сам когда-то думал* [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
О да... [Only registered and activated users can see links. Click Here To Register...]
<div class='quotetop'>Цитата</div>

Цитата:

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

[Only registered and activated users can see links. Click Here To Register...]
24.02.2007, 13:13
AlexaP

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

Код:

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

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

Код:

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

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

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

P.S. форум не пропускает ссылки в коде. [Only registered and activated users can see links. Click Here To Register...]
24.02.2007, 18:47
Zigzag

Цитата:

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. форум не пропускает ссылки в коде.* [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

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

Код:

<input /> *<img />

и т.д.

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

[Only registered and activated users can see links. Click Here To Register...]
24.02.2007, 19:02
Zigzag

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

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">[Only registered and activated users can see links. Click Here To Register...]</td> *<td class="forumThreadTd" align="center">0</td> *<td class="forumPostTd" align="center">0</td> *<td class="forumLastPostTd">Нет сообщений</td> ****</tr> </table>

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

Цитата:

Originally posted by AlexaP@Feb 24 2007, 13:13
Появилась куча вопросов.
Какое объявление лучше использовать?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]А вот у меня здесь прямо противоположное мнение по отношению к мнению Zigzag-а (это, наверное, единственное расхождение в наших с ним взглядах... во всем остальном мы на 100% солидарны [Only registered and activated users can see links. Click Here To Register...] ). Лично я предпочитаю чистый HTML:

Код:

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

И поверьте, причина этого кроется совсем не в обязательном закрытии тэгов в XHTML. Я настоятельно рекомендую Вам закрывать все тэги даже при использовании HTML (конечно же, за исключением "пустых" элементов, для которых закрывающий тэг попросту запрещен). Причина моего предпочтения заключается в элементарной целесообразности и подробно освещается вот [Only registered and activated users can see links. Click Here To Register...]. Есть, конечно, определенные ситуации, когда использование XHTML весьма оправдано. Но эти ситуации на мой взгляд – весьма редкое явление для большинства повседневных проектов...

Цитата:

Originally posted by AlexaP@Feb 25 2007, 00:07
Есть код, к нему нет доступа, только CSS.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Где CSS? [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by AlexaP@Feb 25 2007, 00:07
Можно средствами CSS придать этой таблице такой вид как на картинке, или похожий?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Можно.
25.02.2007, 15:03
Zigzag

Цитата:

Originally posted by AlexaP@Feb 24 2007, 22:07
Zigzag, я не против остановиться на XHTML если научишь.
Вот очередной вопрос. Есть код, к нему нет доступа, только CSS.
...
Можно средствами CSS придать этой таблице такой вид как на картинке, или похожий?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

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

Цитата:

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

Спасибо - все так говорят [Only registered and activated users can see links. Click Here To Register...] .

Цитата:

т.е. вы не можете изменять сам файл 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">[Only registered and activated users can see links. Click Here To Register...]</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. ирония неуместна.
25.02.2007, 15:44
AlexaP

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

Показывать 40 сообщений этой темы на одной странице