DWWEB.RU
СКРИПТЫ

Таблица html

2018/05/12 Марат 661 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>
3. В файле 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 - второго столбца
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
таблица htmlячейки таблицы htmlкак сделать таблицу в htmlтеги html таблицаhtml код таблицыстрока таблицы htmlтекст в таблице htmlтаблица html cssтаблицы html примерысоздание таблицы в htmlширина таблицы htmlhtml страница таблицатаблица по центру htmlhtml столбцы таблицыкак вставить таблицу в htmlкак создать таблицу в htmlтаблица в блокноте html

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019