Фильтр по:
  

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Создание простейших HTML-таблиц (Создание простейших HTML-таблиц)
Создание простейших HTML-таблиц
Дата: Понедельник, 22.04.2013, 18:29 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Рассмотрим минимальный набор тегов и их параметров для создания несложных таблиц



    Каждая таблица начинаться тэгом
    Код
    <table>
    и завершаться тэгом
    Код
    </table>


    Каждая строка начинается тэгом
    Код
    <tr>
    (Table Row) и завершается тэгом
    Код
    </tr>


    Отдельная ячейка в строке обрамляется парой тегов
    Код
    <td>
    и
    Код
    </td>
    (Table Data) или
    Код
    <th>
    и
    Код
    </th>
    (Table Header)


    Тег
    Код
    <th>
    используется обычно для ячеек-заголовков таблицы, а
    Код
    <td>
    - для ячеек-данных.

    Тэги
    Код
    <td>
    и
    Код
    <th>
    не могут появляться вне строки таблицы
    Код
    <tr>


    Количество строк в таблице определяется числом тегов
    Код
    <tr>
    , а количество столбцов - максимальным количеством
    Код
    <td>
    или
    Код
    <th>
    внутри всех строк
    Код
    <tr>



Пример простейшей таблицы
Код
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Ячейка 1 строки 1</td>
<td>Ячейка 2 строки 1</td>
</tr>
<tr>
<td>Ячейка 1 строки 2</td>
<td>Ячейка 2 строки 2</td>
</tr>
</table>



...

Прикрепления: 5182603.png (0.6 Kb)

 
Дата: Воскресенье, 15.09.2013, 15:22 |
Samosval
Рядовой
Группа: Проверенные
Сообщений: 19
Награды: 0
Репутация: 0
Статус: Offline


Скажите,а как сделать что бы таблица менялась в зависимости от размера экрана(т.е. была резиновая),создал таблицу,но при просмотре с мобильной версии она выходит за поля сайта.word-wrap не помогло.

 
Дата: Воскресенье, 15.09.2013, 18:45 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Samosval,
Цитата (Samosval, Вс, 15.09.2013, 15:22:16)
Скажите,а как сделать что бы таблица менялась в зависимости от размера экрана(т.е. была резиновая)

Задать таблице размер в процентах.

Цитата (Samosval, Вс, 15.09.2013, 15:22:16)
создал таблицу,но при просмотре с мобильной версии она выходит за поля сайта

За поля сайта, скорее всего, у вас выходит не сама таблица, а то что расположено в ней - картинки, например, или вложенные элементы с фиксированной шириной.


 
Дата: Воскресенье, 15.09.2013, 22:19 |
Samosval
Рядовой
Группа: Проверенные
Сообщений: 19
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Вс, 15.09.2013, 18:45:42)
За поля сайта, скорее всего, у вас выходит не сама таблица, а то что расположено в ней - картинки, например, или вложенные элементы с фиксированной шириной.

Но их как то можно сделать что бы тоже были резиновыми?

Добавлено (15.09.2013, 22:15)
---------------------------------------------
Почему я вложил вложение,а его нет?

Добавлено (15.09.2013, 22:19)
---------------------------------------------


Сообщение отредактировал Samosval - Воскресенье, 15.09.2013, 22:35
 
Дата: Воскресенье, 15.09.2013, 22:30 |
Samosval
Рядовой
Группа: Проверенные
Сообщений: 19
Награды: 0
Репутация: 0
Статус: Offline


На Пк браузере отображаеться отлично,а вот на мобильном выходит за поля
Подключенный стиль




Прикрепления: 0318022.jpg (314.4 Kb) · 8312865.jpg (92.6 Kb)

 
Дата: Воскресенье, 15.09.2013, 22:42 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Samosval,
Цитата (Samosval, Вс, 15.09.2013, 22:30:15)
На Пк браузере отображаеться отлично,а вот на мобильном выходит за поля

- ну так четко видно что у вас таблицу распирают слова.



- сделайте шрифт поменьше или сократите длинные слова, можно проставить принудительный перенос - тег
Код
<wbr>
... или символ мягкого переноса:
Код
­ & shy;
- без пробела.
...

Прикрепления: 4975441.png (84.3 Kb)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Создание простейших HTML-таблиц (Создание простейших HTML-таблиц)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия