Таблица html
Таблица html ,теги таблицы, столбцы таблицы, строки таблицы – это сегодня будем разбирать!
И конечно же будет множество примеров таблиц тех или иных видов и разновидностей…
Теги таблицы html
Начнем с тегов таблицы - таблица в html обознается двойным тегом "table"
Но если вы так поставите таблицу, то особого смысла в ней не будет и чем собственно применение такого тега отличается от тега абзаца...
Как обозначаются строки в таблице html
Строка в таблице обозначается двойным тегом "tr"
И вспомнил, что ведь есть еще внутри двойной тег "tbody" - который я позабыл, как уже вставлял в таблицу, но он существует и его нужно использовать по правилам, но если вы , как я забудете его использовать, то браузер допишет этот тег самостоятельно...
В каждой строке
Ну что - вот так она должна выглядеть таблица по всем правилам...
<table>
<tbody>
<tr><td>Строка 1 </td></tr>
<tr><td>Строка 2 </td></tr>
<tr><td>Строка 3 </td></tr>
</tbody>
</table>
И мы сможем уже посмотреть на эту таблицу:
| Строка 1 |
| Строка 2 |
| Строка 3 |
И ваше изумление - я вижу на вашем лице - потому, что ничем от обыкновенного текста это не отличается, но если мы сделаем видными её бордюры, то вид изменится сильно!
Либо создаем css файл и добаляем выделенный код без первой и последней строки, либо добавляем весь код на странице до тега </head>table td {
border: 1px solid black;
}
</style>
| Строка 1 |
| Строка 2 |
| Строка 3 |
Теперь добавим еще одни столбец, надо в теге tr - продублировать теги td:
<tbody>
<tr>
<td>Строка 1 - первого столбца</td>
<td>Строка 1 - второго столбца</td>
</tr>
<tr>
<td>Строка 2 </td>
<td>Строка 2 </td>
</tr>
<tr>
<td>Строка 3 </td>
<td>Строка 3 </td>
</tr>
</tbody>
</table>Вот в итоге у нас получилась таблица, с двумя столбцами и тремя строками...:
| Строка 1 - первого столбца | Строка 1 - второго столбца |
| Строка 2 | Строка 2 |
| Строка 3 | Строка 3 |
Ширина таблицы html
Ширина может задаваться несколькими способами...
| Строка 1 + width="400px" |
| Строка 2 |
| Строка 3 |
table td {
border: 1px solid black;
width: 400px;
}
</style>Ширина таблицы html в процентах
Ширина таблицы может задаваться не только в пикселях, можно задать в процентах - и у вас получится резиновая таблица(т.е. в зависимости изменения ширины страницы таблица будет иметь процентную ширину от того блока, куда помещена таблица...)
Для примера давайте возьмем 70%
table td {
border: 1px solid black;
width: 70%;
}
</style>| Строка 1 + width="70%" |
| Строка 2 |
| Строка 3 |
Или пример с двумя столбцами - вся ширина таблицы - возьмем 100%, а столбцы разделим на 70% + 30% - если вы помещаете в таблицу, то будет вид такой...
<tr>
<td width="70%">Строка 1 - первого столбца + width="70%"</td>
<td width="30%">Строка 1 - второго столбца + width="30%"</td>
</tr>
<tr>
<td>Строка 2 </td>
<td>Строка 2 </td>
</tr>
<tr>
<td>Строка 3 </td>
<td>Строка 3 </td>
</tr>
</table>Результат:
| Строка 1 - первого столбца + width="70%" | Строка 1 - второго столбца + width="30%" |
| Строка 2 | Строка 2 |
| Строка 3 | Строка 3 |
Обратите внимание на поведение строки, которая не вместилась, она увеличила высоту строки таблицы.
Если вы собираетесь использовать только файл css, либо стили на странице, то в стилях достаточно прописать и присвоить каждому td свой класс и свою ширину...
table{
border: 1px solid black;
width: 100%;
}
table td.first{
width: 70%;
}
table td.second{
width: 70%;
}
</style>Код:
<tr>
<td class=first ">Строка 1 - первого столбца + стиль="70%"</td>
<td class=second">Строка 1 - второго столбца + стиль="30%"</td>
</tr>
</table>Результат будет аналогичный предыдущему способу...
Высота строки таблицы html
Кроме высоты - можно задать высоту строки таблицы...
<tr>
<td width="70%">Строка 1 - первого столбца + width="70%"</td>
<td width="30%">Строка 1 - второго столбца + width="30%"</td>
</tr>
<tr>
<td height="50px" >Строка 2 + height="50px"</td>
<td>Строка 2 </td></tr>
<tr>
<td height="70px" >Строка 3 + height="70px" </td>
<td>Строка 3 </td>
</tr>
</table>Результат:
| Строка 1 - первого столбца + width="70%" | Строка 1 - второго столбца + width="30%" |
| Строка 2 + height="50px" | Строка 2 |
| Строка 3 + height="70px" | Строка 3 |
Вас может еще заинтересовать список тем : HTML , CSS , TABLE ,
таблица htmlячейки таблицы htmlкак сделать таблицу в htmlтеги html таблицаhtml код таблицыстрока таблицы htmlтекст в таблице htmlтаблица html cssтаблицы html примерысоздание таблицы в htmlширина таблицы htmlhtml страница таблицатаблица по центру htmlhtml столбцы таблицыкак вставить таблицу в htmlкак создать таблицу в htmlтаблица в блокноте html