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