Таблицы

Обсуждение вопросов, проблем связанных с обучением HTML

Re: Таблицы

Сообщение Роман » 18 мар 2011, 19:09

Вы сказали, что если бы мы к тегу <table> применили атрибут rules со значением groups эффект будет достигнут только при использовании <colgroup>.
Я вместо <colgroup> поставил <col>, но ничего не поменялось и всё так как было и без <col>, я не могу понять про какой эффект вы говорили? :)

Код: Выделить всё
<html>
<head>
<title>rules</title>
</head>
<body>
<table border="1" bordercolor="#000000" rules="groups" width="500" cellpadding="3" cellspacing="0">
<caption><b>Энергетическая ценность продуктов питания:</b></caption>

<col width="100">
<col span="2" width="50">
<col width="50">
<col width="50">

<thead bgcolor ="#deb887" title="Шапка">
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align="left" bgcolor ="#faebd7" title="Энергетическая ценность продуктов питания">
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align="left" bgcolor ="#f5f5dc" title="Итого:">
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
Роман
 
Сообщения: 44
Зарегистрирован: 04 дек 2010, 15:06

Re: Таблицы

Сообщение Алексей » 18 мар 2011, 20:15

Взгляните на этот же пример (только не оперой) с использованием <colgroup> вместо <col> - должны появится границы между сгруппированными колонками таблицы.

Код: Выделить всё
<html>
<head>
<title>rules</title>
</head>
<body>
<table border="1" bordercolor="#000000" rules="groups" width="500" cellpadding="3" cellspacing="0">
<caption><b>Энергетическая ценность продуктов питания:</b></caption>

<colgroup width="100">
<colgroup span="2" width="50">
<colgroup width="50">
<colgroup width="50">

<thead bgcolor ="#deb887" title="Шапка">
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align="left" bgcolor ="#faebd7" title="Энергетическая ценность продуктов питания">
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align="left" bgcolor ="#f5f5dc" title="Итого:">
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Таблицы

Сообщение Роман » 20 мар 2011, 12:25

Такие теги: <thead>, <tbody> и <tfoot>, нужно использовать для каждой таблицы отдельно, а если в одной таблице есть вложенная, то для нее тоже нужно прописывать их?
Роман
 
Сообщения: 44
Зарегистрирован: 04 дек 2010, 15:06

Re: Таблицы

Сообщение Роман » 20 мар 2011, 13:19

Будет такое написание являться правильным или лучше использовать как написали вы в седьмом примере в разделе"И снова таблицы" ?:

Код: Выделить всё
<html>
<head>
<title>colgroup</title>
</head>
<body>
<table border="1">
<colgroup span="3" width="20" bgcolor="#deb887" align="left">
<colgroup span="2" width="40" bgcolor="#faebd7" align="center">
<colgroup width="60" bgcolor="#faebd7" align="center">
<colgroup  width="20" bgcolor="#f5f5dc" align="right">
<colgroup  width="30"bgcolor="#f5f5dc" align="right">
<colgroup  width="50" bgcolor="#f5f5dc" align="right">
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
</table>
</body>
</html>
Роман
 
Сообщения: 44
Зарегистрирован: 04 дек 2010, 15:06

Re: Таблицы

Сообщение Алексей » 20 мар 2011, 14:52

Такие теги: <thead>, <tbody> и <tfoot>, нужно использовать для каждой таблицы отдельно, а если в одной таблице есть вложенная, то для нее тоже нужно прописывать их?


Теги <thead> и <tfoot> можно использовать по одному разу в контейнере <table> если таблиц несколько и/или они вложены друг в друга то для каждой из них можно использовать данные теги.

Будет такое написание являться правильным

можно и так сделать.

или лучше использовать как написали вы в седьмом примере в разделе"И снова таблицы" ?:

Всё зависит от поставленных задач..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Таблицы

Сообщение nowichorn » 28 июл 2011, 16:26

Всем привет,может кто подсказать как на таблицу добавить красивую рамку,желательно с примером.
nowichorn
 
Сообщения: 6
Зарегистрирован: 05 июл 2011, 15:45

Re: Таблицы

Сообщение Алексей » 28 июл 2011, 18:54

Если речь идёт о границах таблицы стиль которой отличен от набора стандартных CSS границ описанных вот в этой главе:
http://webremeslo.ru/css/glava5.html#style

то надо смотреть на рисунок/эскиз и думать как лучше сверстать..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Таблицы

Сообщение Helen » 14 май 2012, 21:29

Здравствуйте! Недавно начала изучать html. Пытаюсь сделать таблицу, вложенную в ячейку таблицы. Код выгляди так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Mr. Black's
</title>
</head>

<body bgcolor="#696969" link="#000000" vlink="#483D8B" alink="#ffffff">
<table border="2" cellspacing="10" cellpadding="0" style="width:99%;">

<thead style="height:80px; background-color:#000000">
<tr>
<th colspan="2">
<img style="width:100%;"
src="logo/2.gif" >
</img>
</th>
</tr>
</thead>


<tr style="text-align:left; ">

<td style="width: 220px;"> <! col 1 внутренняя таблица ==============================>

<table cellspacing="0" cellpadding="0" style="width:215px; " >
<tbody style="background-color:#9C9C9C; border-width:5px; height:25px; ">
<tr>
<td >
<a href="index.html" target="_self" style="text-decoration:none;">
На главную</a> </td>
</tr>

<tr>
<td>
<a href="history.html" target="_self" style="text-decoration:none;">
История</a>
</td>
</tr>

<tr>
<td>
<a href="" target="_self" style="text-decoration:none;">
О себе</a>
</td>
</tr>

<tr>
<td>
<a href="" target="_self" style="text-decoration:none;">
Галлерея</a>
</td>
</tr>

<tr>
<td>
<a href="" target="_self" style="text-decoration:none;">
Классика</a>
</td>
</tr>

<tr>
<td>
<a href="" target="_self" style="text-decoration:none;">
Каталог </a>

</td>
</tr>
</tbody>

</table>

</td><! col 1 внутренняя таблица ==============================>

<! col 2 основное содержание ==============================>
<td style="width:980px;">
OSNOVNOE SODERZHANIE
</td> <! col 2 основное содержание ==============================>

</tr>

<tfoot>
<tr>
<th colspan="2">
Дно таблицы
</th>
</tr>
</tfoot>
</table>
</body>

</html>
При проверке в разных браузерах отступ от края вложенной таблицы разный. Подскажите, пожалуйста, как его убрать или выравнять.... у меня вообще большая проблема с маштабированием((
Helen
 
Сообщения: 4
Зарегистрирован: 14 май 2012, 21:12

Re: Таблицы

Сообщение Алексей » 16 май 2012, 21:28

Попробуйте с помощью CSS обнулить поля и отступы для всех элементов.. вот так:
Код: Выделить всё
  <style>
   * {
    margin: 0;
    padding: 0;
   }
  </style>


- Да и вообще что бы небыло в дальнейшем проблем всегда начинайте с обнуления полей и отступов что бы разные браузеры не добавляли отсебятины.

Вы владеете CSS ??? я бы много чего переделал в Вашем коде.. так например первым делом вынес бы всю информацию о размерах, фоне, бордюрах - в общем стиле в отдельный внешний CSS файл.. .. да и вообще возможно переверстал всё с помощью блоков <div>..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Таблицы

Сообщение Helen » 16 май 2012, 22:00

Спасибо! попробую сейчас....у меня есть вариант этой страницы, сделанной с помощью DIVов. Но мне нужно поработать и с табличной версткой, понять, какие проблемы могут возникнуть...вот и усложняю себе жизнь)))
Последний раз редактировалось Helen 16 май 2012, 22:35, всего редактировалось 1 раз.
Helen
 
Сообщения: 4
Зарегистрирован: 14 май 2012, 21:12

Пред.След.

Вернуться в HTML

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3

cron
Рейтинг@Mail.ru