проектирование с таблицами

Question

Я давно занимаюсь разработкой сайтов без таблиц. проблема в том, что создание сайта может занять очень много времени. Люди, которые проектируют, используя таблицы, могут закончить намного быстрее. Что такое хороший учебник или как это сделать?

Я знаю, что это неправильно, но я заметил, что многим клиентам все равно, и они хотят, чтобы их сайт как можно скорее. Делать это можно только в зависимости от сайта.

PS: я пытался спроектировать сайт, скажем, в Photoshop или Illustrator, затем экспортировал дизайн в виде веб-страницы, но когда дело доходит до изменения дизайна, я не могу обернуть голову, чтобы сайт отображался правильно ... и обычно я разозлился и начал кодировать его вручную. Я считаю, что ручное кодирование намного проще, чем все остальное. я думаю, что это плохая привычка или может быть. я думаю, что больше времени занимаюсь этим вручную.

Answer 1

Макет на основе таблиц чрезвычайно прост, по крайней мере, концептуально. Таблица начинается с <table> и заканчивается </table>. Внутри у вас ноль или более строк (<tr>...</tr>), внутри которых у вас ноль или более столбцов (<td>...</td>). Есть несколько других тегов (thead / tbody / tfoot, th для ячеек заголовка), но это действительно все, что вам нужно знать о таблицах - учебник не требуется.

Основными достоинствами стола являются:

1. Размер таблицы корректируется в зависимости от размера содержимого
2. Столбцы всегда выстраиваются в ряд, что упрощает выравнивание контента по вертикали
3. Простой код - всего несколько строк HTML - все, что нужно для базовой структуры
4. Универсально поддерживается - таблица будет выглядеть и работать правильно в старых / странных браузерах (я смотрю на вас, IE!)

Недостатки таблиц включают «сложное» состояние отношений с div и CSS, не говоря уже о презрении ваших коллег. Таблицы не являются полной заменой div и CSS, но не позволяйте никому говорить, что div и CSS также являются полной заменой таблиц.

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

1. border - это определяет границу вокруг и между ячейками таблицы
2. padding - это количество отступов между содержимым и краями ячейки
3. text-align - горизонтальное выравнивание содержимого в ячейке
4. vertical-align - вертикальное выравнивание содержимого в ячейке (полезно для вертикального центрирования!)
5. border-collapse - вы можете свернуть границу, чтобы удалить промежутки между ячейками

Answer 2

Если вы используете таблицы, у вас будет гораздо больше головной боли, если вы попытаетесь сделать какой-нибудь модный DHTML. Элементы таблицы не являются блочными элементами, они не являются блочными элементами, а являются таблицами.

Если у вас есть просто статический HTML-сайт без javascript, тогда ваши проблемы не так серьезны, однако одним из аспектов дизайна таблицы является разделение дизайна и структуры. Что стоит того, чтобы выучить CSS.

Например, забудьте только о преимуществах и отсутствии головной боли, связанной с тем, что нужно выстраивать макет таблицы, когда вы захотите внести коррективы позже, размещение всех правил разработки в файле css сокращает последующие загрузки для клиентов, поскольку ваш css будет кэшироваться если ваши страницы разметки генерируются динамически с помощью PHP. Это заставляет ваш сайт загружаться быстрее.

И в любом случае многие разработчики могут создавать макеты без таблиц css, так как другие быстро создают некрасивые сайты table + spacer.gif.

Answer 3

W3Schools имеет довольно хороший учебник здесь:

http://www.w3schools.com/html/html_tables.asp

Возможно, вы захотите потратить время на изучение использования DIV, CSS и т. Д., Так как экспорт веб-сайтов из Photoshop и Illustrator даст вам головную боль только тогда, когда вам нужно будет внести небольшие изменения. (Наряду с многочисленными другими сценариями.)

Answer 4

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

Если создаваемый вами сайт (в будущем) потребует (очень) незначительного обслуживания или вообще его не будет, тогда таблицы будут лучше / быстрее. Однако, если вы планируете вносить изменения в дизайн / макет сайтов в будущем (даже просто среднее количество изменений / исправлений), дивоцентрический дизайн будет гораздо более полезным.

Answer 5

Не вопрос, где учебник для макета div? Я только что читал книгу о веб-доступности, в которой говорится о предпочтениях для макета div в довольно сильных терминах.

Answer 6

Может быть, я Luddite , но я не вижу ничего плохого в использовании таблицы для макета страницы. Это работает везде, и, как вы сказали, пользователи по праву не очень заботятся. Обратите внимание, что я сказал a таблица; несколько сайтов с вложенными таблицами - это кошмар. И то, что вы используете таблицу для каркаса, не означает, что вам не следует широко использовать CSS для стилизации ее и остальной части вашего сайта.

Answer 7

В Интернете доступно множество учебных пособий, но я собираюсь пойти другим путем с моим ответом.

Вы создаете эти страницы для правильной работы или для бизнеса?

Если первое, непременно узнайте как можно больше о решениях типа CSS. Вы должны делать это в любом случае, но не позволяйте этому мешать доставке.

Если последнее, я сомневаюсь, что клиенту важно, насколько «чист» код, стоящий за ним, если он выглядит хорошо. Их главной заботой будет скорость доставки и приятный рендеринг во всех основных браузерах.

Вот почему я до сих пор использую таблицы для разметки того, что я доставляю клиентам. Я также тестирую его только в трех браузерах (я не буду говорить, какой именно), так как об этом заботятся все мои клиенты. Им действительно все равно, правильно ли отображает Opera на iPhone (например), поскольку это не их целевой рынок.

Answer 8

При создании веб-страницы HTML создание таблицы на странице объявляется внутри тела содержимого, в которое может быть объявлена ​​таблица <table> и заканчивается </table>, затем заголовком таблицы <theader></theader> затем строки были инициализированы <tr>content</tr> данные таблицы вставляются с использованием <td>content</td> границы таблицы и ширина шрифта высота стиль шрифта фон веса объявлены в CSS.

Answer 9

лучший учебный сайт, который я знаю, это htmldog , который, несмотря на название, в основном о css.

Также два неоценимых сайта для репликации табличных дизайнов с использованием divs:

1. Искусственные столбцы (для создания div равная высота
2. Этот сайт, который будет создать базовый кросс-браузер верстка страниц HTML и CSS для вас: http://fu2k.org/alex/css/onetruelayout/example/interactive

Придерживайтесь div - когда вы привыкнете, это станет второй натурой, может быть, даже быстрее, чем за столами

Answer 10

Если вам нравятся таблицы, вы знаете таблицы, и они не ошибаются, тогда придерживайтесь этого, но «переход к диву» может быть довольно раскрепощающим. Тем не менее, вам нужно понимать позиционирование, и я не нашел лучшего учебника, чем следующий, который научит вас позиционировать div

http://www.barelyfitz.com/screencast/html-training/css/positioning