Главная
Друзья! Пожалуйста не нервничайте! Скоро все заработает... у нас генеральная уборка...

Ширина столбца html

Ширина столбца будем её выставлять нескольким способами. Ширина столбца в самой таблице, ширина столбца в процентах и пикселях, + ширина столбца через css.

Напоминаю, что ширина обозначается английским словом:

Width Мы уже сделали таблицу , изменили её ширину , поставили посередине , а про ширину столбцов совсем и забыли!

Если мы помним, из предыдущих тем, то ширина таблицы измеряется в 1. %, 2.пикселях! Эти свойства наследуют столбцы!

Что задать ширину столбца, с ним нужно поступить аналогично установки ширины самой страницы!

Давайте поэкспериментируем! С процентами!

Создадим таблицу с тремя столбцами!

И присвоим им ширину 25% + 50% + 25% сумма должна быть равна 100%.

Как видим, наша страница заполняет полное пространство на данной странице.

код:

<table border="1" width="100%">

    <tr>

        <td width="25%">width="25%"</td>

        <td width="50%">width="50%"</td>

        <td width="25%">width="25%"</td>

    </tr>

</table>

Результат:

width="25%" width="50%" width="25%"

Теперь ширину столбца сделаем в пикселях.

Общая ширина текстового поля, где вы читаете данный текст не равна 600 пикселям.

Делим на 3 части 150px + 300px + 150px

код:

<table border="1">
    <tr>
        <td width="150">width="150"</td>
        <td width="300">width="300"</td>
        <td width="150">width="150"</td>
    </tr>
</table>

Смотрим наши получившиеся столбцы с разной шириной:

width="150" width="300" width="150"

Теперь ширину столбца пропишем через css.

Ширина столбца через css

Сам столбец обозначается тегом "td":

<td> Содержание столбца.</td>

Есть несколько вариантов, как прописать ширину столбцов.

К примеру, если вы пропишите сам столбец и к нему прикрепите ширину.

Вот так:

td {

Width: 300px;

}

Но у этого способа есть один самый главный минус - все столбцы на странице будут иметь эту ширину!

Поэтому, для каждого столбца нужно поставить отдельный класс или ид.

Например - таблица с шириной через css.

Обратите внимание, что на третьем столбце ширина не прописана - вопрос - какой ширины должен быть третий столбец!?

 <style>.example{ width: 100%; } .example td.first{ width: 25%; } .example td.second{ width: 50%; }</style>

Код:

<table class="example">
    <tr>
        <td class="first">class="first"</td>
        <td class="second">class="second"</td>
        <td>no class</td>
    </tr>
</table>

Результат:

class="first" class="second" no class