Создание простейших HTML-таблиц
[1 ] likbezz [22.04.2013, 18:29]
Рассмотрим минимальный набор тегов и их параметров для создания несложных таблиц Каждая таблица начинаться тэгом и завершаться тэгом Каждая строка начинается тэгом (Table Row) и завершается тэгом Отдельная ячейка в строке обрамляется парой тегов и (Table Data) или и (Table Header) Тег используется обычно для ячеек-заголовков таблицы, а - для ячеек-данных. Тэги и не могут появляться вне строки таблицы Количество строк в таблице определяется числом тегов , а количество столбцов - максимальным количеством или внутри всех строк Пример простейшей таблицы Код
<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>
...
[2 ] Samosval [15.09.2013, 15:22]
Скажите,а как сделать что бы таблица менялась в зависимости от размера экрана(т.е. была резиновая),создал таблицу,но при просмотре с мобильной версии она выходит за поля сайта.word-wrap не помогло.
[3 ] likbezz [15.09.2013, 18:45]
Samosval , Скажите,а как сделать что бы таблица менялась в зависимости от размера экрана(т.е. была резиновая)
Задать таблице размер в процентах. создал таблицу,но при просмотре с мобильной версии она выходит за поля сайта
За поля сайта, скорее всего, у вас выходит не сама таблица, а то что расположено в ней - картинки, например, или вложенные элементы с фиксированной шириной.
[4 ] Samosval [15.09.2013, 22:19]
За поля сайта, скорее всего, у вас выходит не сама таблица, а то что расположено в ней - картинки, например, или вложенные элементы с фиксированной шириной.
Но их как то можно сделать что бы тоже были резиновыми? Добавлено (15.09.2013, 22:15) --------------------------------------------- Почему я вложил вложение,а его нет? Добавлено (15.09.2013, 22:19) ---------------------------------------------
Код
<!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" xml:lang="ru" lang="ru"> <head> <title>Расписание поездов Новоукраинка на 2013 — ж/д вокзал Новоукраинка, станція Новоукраїнка</title> <meta name="keywords" content="расписание Новоукраинка,вокзал Новоукраинка,расписание поездов Новоукраинка,поезд Новоукраинка,вокзал Новоукраїнка,билеты Новоукраинка,маршрут движения,ж/д расписание Новоукраинка" /> <meta name="description" content="Новое железнодорожное расписание поездов по станции Новоукраинка, справочная. Железнодорожный вокзал Новоукраинка, расписание прибытия и отправления поездов" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="images/style.css" type="text/css" /> </head> <body> <table border="0" width="100%"> <tr> <th>Поезд №</th> <th>Маршрут поезда</th> <th>Прибытие</th> <th>Отправление</th> <th>Расписание движения пассажирских поездов<br />по ж/д станции Новоукраинка</th> </tr> <tr> <td>63 Скіфія</td> <td><a href="http://poezd.turcompas.com/marshrut/018480" title="Поезд 63 Днепропетровск Одесса" rel="nofollow">Днепропетровск Одесса</a></td> <td>1.25</td> <td>1.27</td> <td>25/05-29/09/2013 <img src='images/every.jpg' alt='' />, с 1/10/2013 <img src='images/e1.jpg' alt='' />, при двух нечетных 27, 29, 1, 3</td> </tr> <tr> <td>431О</td> <td><a href="http://poezd.turcompas.com/marshrut/07539" title="Поезд 431О Харьков Одесса" rel="nofollow">Харьков Одесса</a></td> <td>1.50</td> <td>1.52</td> <td>2/06-17/09/2013 <img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>64 Скіфія</td> <td><a href="http://poezd.turcompas.com/marshrut/031930" title="Поезд 64 Одесса Днепропетровск" rel="nofollow">Одесса Днепропетровск</a></td> <td>2.27</td> <td>2.29</td> <td>26/05-30/09/2013 <img src='images/every.jpg' alt='' />, со 2/10/2013 <img src='images/e2.jpg' alt='' />, при двух нечетных 28, 30, 2, 4</td> </tr> <tr> <td>60Д Чайка</td> <td><a href="http://poezd.turcompas.com/marshrut/021829" title="Поезд 60Д Одесса Харьков" rel="nofollow">Одесса Харьков</a></td> <td>3.10</td> <td>3.12</td> <td><img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>59О Чайка</td><td><a href="http://poezd.turcompas.com/marshrut/021831" title="Поезд 59О Харьков Одесса" rel="nofollow">Харьков Одесса</a></td> <td>3.22</td> <td>3.24</td> <td><img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>92</td><td><a href="http://poezd.turcompas.com/marshrut/026046" title="Поезд 92 Луганск Одесса" rel="nofollow">Луганск Одесса</a></td> <td>3.38</td> <td>3.40</td> <td><img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>638Ш</td><td><a href="http://poezd.turcompas.com/marshrut/05229" title="Поезд 638Ш Одесса Черкассы" rel="nofollow">Одесса Черкассы</a></td> <td>4.37</td> <td>4.40</td> <td>25/05-18/09/2013 <img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>33М</td> <td><a href="http://poezd.turcompas.com/marshrut/06534" title="Поезд 33М Москва Одесса" rel="nofollow">Москва Одесса</a></td> <td>6.22</td> <td>6.24</td> <td>27/05-2/09, 27-30/12/2013, 1-5/01/2014 <img src='images/every.jpg' alt='' /> ; 3/09-25/12/2013, с 7/01/2014 <img src='images/e1.jpg' alt='' />, при двух нечетных 29, 1, 3; 18, 26, 30/04/2014</td> </tr> <tr> <td>92</td> <td><a href="http://poezd.turcompas.com/marshrut/026047" title="Поезд 92 Одесса Луганск" rel="nofollow">Одесса Луганск</a></td> <td>19.02</td> <td>19.04</td> <td><img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>432Д</td> <td><a href="http://poezd.turcompas.com/marshrut/07538" title="Поезд 432Д Одесса Харьков" rel="nofollow">Одесса Харьков</a></td> <td>19.32</td> <td>19.34</td> <td>1/06-16/09/2013 <img src='images/every.jpg' alt='' /></td> </tr> <tr> <td>34Ш</td> <td><a href="http://poezd.turcompas.com/marshrut/06535" title="Поезд 34Ш Одесса Москва" rel="nofollow">Одесса Москва</a></td> <td>22.23</td> <td>22.25</td> <td>28/05-3/09, 28-31/12/2013, 2-6/01/2014 <img src='images/every.jpg' alt='' />; 4/09-26/12/2013, с 8/01/2014 <img src='images/e2.jpg' alt='' />, при двух нечетных 30, 2, 4; 19, 27/04, 1/05/2014</td> </tr> <tr> <td>637Ш</td> <td><a href="http://poezd.turcompas.com/marshrut/05230" title="Поезд 637Ш Черкассы Одесса" rel="nofollow">Черкассы Одесса</a></td> <td>22.44</td> <td>22.47</td> <td>25/05-15/09/2013 <img src='images/every.jpg' alt='' /></td> </tr> </table> <table border="0" width="100%"> <td> <b>Примечания:</b><br /> <ul> <li>В онлайн расписании поездов по ж/д вокзалу Новоукраинка возможны оперативные изменения</li> <li>** - отмечен "беспересадочный вагон"</li> <li>Периодичность движения поездов по станции Новоукраинка указана от НАЧАЛЬНОГО вокзала отправления</li> <li>Забронировать или купить ж/д билеты на вокзале Новоукраинка можно в онлайн кассах железной дороги</li> <li>Все грузоперевозки Новоукраинка выполняются согласно утвержденному регламенту железной дороги.</li> </ul></td> </table> </body> </html>
Сообщение отредактировал Samosval - Воскресенье, 15.09.2013, 22:35
[5 ] Samosval [15.09.2013, 22:30]
На Пк браузере отображаеться отлично,а вот на мобильном выходит за поля Подключенный стиль
Код
body { background: #d0ccd0; font-family: 'Comfortaa', cursive; font-size: 12px; padding: 0px; margin: auto; color:#2d3c43; max-width:auto; border:1px #c8c1ca dotted; word-wrap: break-word; } .tab th { border:1px #f5eeaf dotted; padding: 1px 0px 1px 1px; vertical-align: middle; text-align: center; background-color: #b7b8b6; word-wrap: break-word; } .tab td { border-bottom: 1px #f5eeaf dotted; padding: 3px 3px 3px 3px; vertical-align: middle; word-wrap: break-word; } .tab { width: 90%; margin: auto; background-color: #939393; text-align: left; border: 0; word-wrap: break-word; } .remark li { margin: 5px 0 5px 0; word-wrap: break-word; } #tt1{ background: #d0ccd0; word-wrap: break-word; }
[6 ] likbezz [15.09.2013, 22:42]
Samosval , На Пк браузере отображаеться отлично,а вот на мобильном выходит за поля
- ну так четко видно что у вас таблицу распирают слова. - сделайте шрифт поменьше или сократите длинные слова, можно проставить принудительный перенос - тег ... или символ мягкого переноса: - без пробела. ...