В данной статье я расcкажу о том как построить таблицы в HTML.
Таблицы обычно используют для показания «табличных данных«, например, информацию, логически упорядоченную в столбцы и ряды.
По началу вам может показаться, что построение таблиц в HTML сложное. Но прочитав данную статью вы поймете, что это не так.
Например,
|
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td>Клетка 1</td> <td>Клетка 2</td> </tr> <tr> <td>Клетка 3</td> <td>Клетка 4</td> </tr> </table> |
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
Разницы между <tr> и <td>
Давайте разберем пример приведенный выше.
Для создания таблиц в HTML используют три основных тэга:
<table> — начало и конец таблицы.
<tr> — «table row/ряд таблицы», начинает и заканчивает горизонтальный ряд ячеек.
<td> — сокращение от «table data/табличные данные». Данный тэг начинает и заканчивает каждую ячейку ряда таблицы.
Давайте вернемся к нашему примеру: таблица начинается с тэга <table>, затем идет тэг <tr> который создает новый ряд. В данном ряду указываются две ячейки: <td>Клетка 1</td> и <td>Клетка 2</td>. С помощью тэга </tr> мы закрываем ряд, и тут же создаем новый ряд <tr>. И также как и в первом ряду создаем две ячейки: <td>Клетка 3</td> и <td>Клетка 4</td>. Закрываем ряд </tr>. Таблица закрывается </table>.
Если говорить кратко то: ряды — это горизонтальные строки ячеек, а столбцы — вертикальные столбцы ячеек:
Клетка 1 и Клетка 2 образуют ряд. Клетка 1 и Клетка 3 образуют столбец.
В примере приведенном выше таблица имеет два ряда и два столбца. Но вы также можете создавать таблицы с неограниченным числом рядов и столбцов.
Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<table> <tr> <td>Клетка 1</td> <td>Клетка 2</td> <td>Клетка 3</td> <td>Клетка 4</td> <td>Клетка 5</td> <td>Клетка 6</td> </tr> <tr> <td>Клетка 7</td> <td>Клетка 8</td> <td>Клетка 9</td> <td>Клетка 10</td> <td>Клетка 11</td> <td>Клетка 12</td> </tr> <tr> <td>Клетка 13</td> <td>Клетка 14</td> <td>Клетка 15</td> <td>Клетка 16</td> <td>Клетка 17</td> <td>Клетка 18</td> </tr> <tr> <td>Клетка 19</td> <td>Клетка 20</td> <td>Клетка 21</td> <td>Клетка 22</td> <td>Клетка 23</td> <td>Клетка 24</td> </tr> </table> |
| Клетка 1 | Клетка 2 | Клетка 3 | Клетка 4 | Клетка 5 | Клетка 6 |
| Клетка 7 | Клетка 8 | Клетка 9 | Клетка 10 | Клетка 11 | Клетка 12 |
| Клетка 13 | Клетка 14 | Клетка 15 | Клетка 16 | Клетка 17 | Клетка 18 |
| Клетка 19 | Клетка 20 | Клетка 21 | Клетка 22 | Клетка 23 | Клетка 24 |
Для того, чтобы создать рамку вокруг таблицы используют атрибут border. С помощью данного атрибута задается толщина рамки вокруг таблицы.
Например,
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1"> <tr> <td>Клетка 1</td> <td>Клетка 2</td> </tr> <tr> <td>Клетка 3</td> <td>Клетка 4</td> </tr> </table> |
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
Толщина рамки задается в пикселях.
Также вы можете задавать размер таблице в пикселях или в процентах от размера экрана:
Например,
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1" width="30%"> <tr> <td>Клетка 1</td> <td>Клетка 2</td> </tr> <tr> <td>Клетка 3</td> <td>Клетка 4</td> </tr> </table> |
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
У таблиц есть большое количество атрибутов. Вот еще дав из них:
align: используется для выравнивания содержимого по горизонтали, в ряду или в отдельной ячейке. Например, left (по левому краю), center (по центру) или right (по правому краю).
valign: используется для выравнивания содержимого ячейки по вертикали. Например, top, middle или bottom.
Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <table border="1" width="50%"> <tr> <td align="right" valign="top">Клетка 1</td> <td align="left" valign="middle">Клетка 2</td> </tr> <tr> <td align="center" valign="bottom">Клетка 3</td> <td align="right" valign="top">Клетка 4</td> </tr> </table> </html> |
Какую информацию можно добавлять в таблицы?
Теоретически вы можете добавлять все: текст, ссылки и изображения…
Раньше таблицы использовали для распределения содержимого страницы. Однако для этого создали другой способ — CSS. Но об этом чуть позже.