You are currently viewing Используем таблицы в html

Друзья, в этом уроке мы с вами обсудим таблицы в html. Сразу хочу сказать, что html таблицы используются не только для вывода каких-либо данных, но и для построение самой странички. Так, что обязательно изучите данный урок от корки до корки.

И так, для начала немного теории. Ребята, для того, чтобы сказать компьютеру, что мы с вами хотим создать таблицу на html страничке, нам нужно использовать парный тег <table> </table>, а между ними прописываются теги для строк и ячеек. К примеру, если вам нужна таблица с одной строкой, то ее код будет таким.

<table>
<tr> </tr>
</table>

А ее внешний вид будет такой.

А, если вы хотите, чтобы в коде вашей таблице была одна строка и к примеру три ячейки, то ее код будет таким.

<table>
<tr><td> </td><td> </td><td> </td></tr>
</table>

А внешний вид таблицы будет такой.

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

<table>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>

Следовательно, внешний вид таблицы будет таким.

Надеюсь общий смысл вам понятен, теперь несколько строк про наполнение таблиц контентом. Так вот, если вы захотите написать что-либо в какой-либо ячейки или строке, то писать нужно между тегами <td></td> например так.

<table>
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>
</table>

Внешний вид таблицы будет таким.

строка 1 ячейка 1 строка 1 ячейка 2 строка 1 ячейка 3
строка 2 ячейка 1 строка 2 ячейка 2 строка 2 ячейка 3

И так, думаю пора перейти к практике и добавить код нашей таблицы на свою html страничку.


<html>
<head>
<title>Эта страница создана за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня отличный день. <br><i>Я сделал свою первую страничку.</i>
<br><font color="#0000FF" size="5"><b>я буду богатым и свободным человеком!</b></font>
<br><br>
<a href="https://seo-skazki.ru"><img src="images/5055.jpg" width="400" height="400" alt="создание и продвижение сайтов" title="все про создание и продвижение сайтов в интернете" border="0"></a>
<br><br>
<a href="https://seo-skazki.ru" target="_blank" alt="Создание и продвижение сайтов" title="Букварь по созданию сайтов, продвижению и заработку в интернете.">Учебник по seo</a>
<br><br>
<table>
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>
</table>
</center>
</body>
</html>

Теперь ваша первая страничка будет такой. Следует учесть, что в браузерах таблица будет невидимой и, чтобы сделать ее видимой нужно дописать к коду таблицы значение border 1, чуть ниже я покажу, как, а сейчас я бы хотел ответить на несколько вопросов, которые могут возникнуть у многих из вас. Так вот, во-первых, вам следует знать, что на одной страничке вы можете создавать неограниченное количество таблиц. А во-вторых при желании вы можете создавать таблицы внутри других таблиц.

И так, для того, чтобы показать вам, как создать html таблицу внутри другой таблицы, в качестве примера я создам таблицу из двух строк и двух ячеек.

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Ее внешний вид будет такой.

Теперь, в код первой ячейки я вставлю код точно такой же таблицы.

<table>
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Теперь внешний вид нашей таблице будет таким. Не обращайте внимание на пропорции ячеек, чуть ниже я покажу, как изменять размер каждой ячейки.

Следует учесть! Если вы решили прямо сейчас поэкспериментировать и добавили на свою страничку этот код, то ваша таблица будет невидимой, а для того, чтобы сделать ее видимой, нужно дописать тег border 1.

И так, для того, чтобы вы поняли, что к чему, чуть ниже я написал код таблицы с одной строкой и одной ячейкой. Обратите внимание, то, что в примере я добавил тег border и поставил значение 1, тем самым сделал таблицу видимой.

<table border="1">
<tr><td> </td></tr>
</table>

А вот, если вы захотите создать таблицу с определенной высотой и шириной, то в этом случае нам с вами нужно дописать к коду таблицы несколько тегов. Кстати, про них я уже писал, когда рассказывал как добавить картинку на html страничку.

<table border="1" width="300" height="150">
<tr><td> </td></tr>
</table>

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

<table border="1" width="300" height="150">
<tr>
<td width="50"> </td> <td> </td>
</tr>
</table>

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

<table border="1" width="300" height="150">
<tr>
<td width="50" bgcolor="#CCCCCC"> </td> <td bgcolor="#FFFF99"> </td>
</tr>
</table>

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

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

<html>
<head>
<title>Эта страница создана за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня отличный день. <br><i>Я сделал свою первую страничку.</i>
<br><font color="#0000FF" size="5"><b>я буду богатым и свободным человеком!</b></font>
<br><br>
<a href="https://seo-skazki.ru"><img src="images/5055.jpg" width="400" height="400" alt="создание и продвижение сайтов" title="все про создание и продвижение сайтов в интернете" border="0"></a>
<br><br>
<a href="https://seo-skazki.ru" target="_blank" alt="Создание и продвижение сайтов" title="Букварь по созданию сайтов, продвижению и заработку в интернете.">Учебник по seo</a>
<br><br>
<table>
<tr background="images/teksturka.jpeg">
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>
</table>
</center>
</body>
</html>

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

Видео урок по созданию html таблицы