Таблица html

2018/05/12 Марат 661 0 HTML | CSS | TABLE |

Таблица 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>

<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>

</tr>

<tr>

<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>

3. В файле css без первой и последней строки предыдущего выделенного кода.

Ширина таблицы html в процентах

Ширина таблицы может задаваться не только в пикселях, можно задать в процентах - и у вас получится резиновая таблица(т.е. в зависимости изменения ширины страницы таблица будет иметь процентную ширину от того блока, куда помещена таблица...)

Для примера давайте возьмем 70%

<style>

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>

</tr>

<tr>

<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

Кроме высоты - можно задать высоту строки таблицы...

<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