Начните создавать простые таблицы в HTML

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

Основные таблицы:

Давайте возьмем наш список продуктов, который мы использовали в учебнике по списку, и на этот раз превратим его в таблицу. Мы поместим товары в первый столбец, а цены во второй столбец.

Это код, благодаря которому это произошло. Фактический код находится слева, а английское описание — справа. Описание имеет отступ, чтобы показать «структуру» оператора таблицы.

Смущенный? Хорошо, давайте посмотрим на таблицу выше. На самом деле эта таблица довольно проста. Вы строите таблицы так же, как читаете книгу; слева направо и сверху вниз. Таблица начинается с тега <table> и заканчивается тегом </table> . Каждая строка начинается с тега <tr> и заканчивается тегом </tr> . Каждая часть табличных данных начинается с тега <td> и заканчивается тегом </td> .

Но это не стол, скажете вы! У него нет границ! На самом деле это стол. Это таблица без границ или BORDER=”0″ . Эта концепция очень важна, когда вы хотите использовать операторы TABLE для форматирования своих веб-страниц. Вы не всегда хотите толстую границу. Итак, давайте на этот раз сделаем таблицу с ГРАНИЦЕЙ .

Единственная разница между этой таблицей и предыдущей заключается в операторе <table> , который выглядит следующим образом.

<граница таблицы=”7″>

Довольно легко, да? Размер границы представлен в пикселях. Хорошо, теперь давайте немного больше CELLSPACING . Это расстояние между ячейками нашей таблицы. Вы также можете думать об этом как о толщине стенки между ячейками таблицы.

Это выглядит намного лучше. Вы видите разницу? Опять же, единственное изменение в операторе <table> выглядит следующим образом.

<граница таблицы=”7″ Cellspacing=”7″>

CELLSPACING , как и BORDER , также измеряется в пикселях. Но текст выглядит слишком близко к стенам стола, скажете вы! Ладно, ладно, это тоже можно исправить. Это называется CELLPADDING . Это пространство между содержимым клетки и краями клеточных стенок.

Ах, теперь это так, как вы хотели? Нет? Ну, мне пришлось немного преувеличить цифры, но это было только для того, чтобы попытаться донести мысль. Надеюсь, вы видите различия. Предыдущая таблица была создана с помощью оператора <table> , показанного ниже.

<граница таблицы=”7″ CellPacing=”7″ CellPadding=”7″>

Обрамление изображений:

Теперь мы хотим перейти к более интересным вещам. Обрамление изображений — отличный способ улучшить ваши фотографии. Это заставляет их, кажется, прыгать прямо со страницы. Вот мой пятисекундный шедевр.

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

<граница таблицы=”7″ alt=””>
<tr>
<td><img src="image.gif"></td>
</tr>
</таблица>

Тег <tr> и теги </tr> можно опустить, если хотите. Он по-прежнему будет работать нормально. Сторонники чистоты HTML, вероятно, возразят, что эти теги должны быть там. Если вы чувствуете себя так, как я обычно чувствую, тогда используйте их.

Или вы также можете обрамлять свои фотографии текстом, как показано ниже.

Нетто, эй! Код показан ниже.

<граница таблицы=”7″ cellpadding=”10″>
<tr>
<td><img src="image.gif" alt=""></td>
<td>Какой<br>шедевр!</td>
</tr>
</таблица>

У меня есть еще одно замечание по кадрированию изображений. Если у вас возникли проблемы с центрированием изображения, попробуйте следующее.

<td align="center"><img src="image.gif"></td>

Ссылки на обрамление:

Вы также можете размещать ссылки внутри таблицы. На самом деле вы можете поместить всю свою страницу в набор табличных команд, если хотите, и с помощью BORDER=”0″ никто не сможет точно сказать. Вы спросите, зачем вам это? Для форматирования изображений и текста вместе на вашей странице; подумай об этом. Хорошо, вернемся к оформлению ссылок.

Вот код, который это сделал.

<граница таблицы=”7″ cellpadding=”10″>
<tr>
<td><a href="http://www.google.com/">Google.com</a></td>
<td><a href="http://www.yahoo.com/">Yahoo!</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/">Дизайн JJW</a></td>
<td><a href="http://www.iproundup.com/">Обзор IP-адресов</a></td>
</tr>
</таблица>

Что ж, надеюсь, вам понравился этот небольшой раздел, посвященный оператору <table> . С оператором <table> вы можете сделать намного больше, чем это возможно в этом руководстве. Тем не менее, я надеюсь, что это помогло.

Ссылка на этот учебник!

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