Друзья, в этом уроке мы с вами обсудим таблицы в 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, тем самым сделал таблицу видимой.
<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>После данных правок ваша первая страничка должны быть такой. На этом, данный урок закончен. В следующем уроке я покажу вам, как при помощи таблицы создать скелет простого сайта.