Урок №8. Оформление строк и ячеек.

Содержание урока:

Оформление строк и ячеек.
Объединение строк и ячеек.


 

Оформление строк и ячеек.

Таблицы формируются построчно. Поэтому, заданные в строке параметры распространяют свое действие на все ячейки строки.

Для строк используют три атрибута:

align – выравнивает текст в ячейках таблицы по горизонтали. Возможны значения left, right, center.

valign — выравнивает текст в ячейках по вертикали, возможны значения: вверх (top), вниз (bottom), по центру (middle).

bgcolor — задает цвет строки.

Пример:

<!doctype html>

   <html>

    <head>

      <title>Таблицы</title>

    </head>

    <body>

       <table width="250" bgcolor="violet" border="2"
        align="center" cellspacing="4" cellpadding="8">

         <caption>Пример таблицы</caption>

         <tr>

         <th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th></tr>

         <tr align="center" valign="middle" bgcolor="yellow”>

         <td>№1.1 Желтый фон, текст по середине ячейки.</td>

         <td>№2.1</td>

         <td>№3.1</td></tr>

         <tr align="left" valign="bottom">

         <td>№1.2</td>

         <td>№2.2 Фон заданный для всей таблицы, текст снизу.</td>

         <td>№3.2</td></tr>

         <tr align="center" valign="top" bgcolor="red”><td>№1.3</td>

         <td>№2.3</td>

         <td>№3.3 Красный фон, текст сверху ячейки.</td></tr>

       </table>

    </body>

   </html>

 

Вид в браузере:

Пример атрибутов align, valign, bgcolor

 

 

Также, эти атрибуты можно применять и к каждой ячейке по отдельности, просто добавьте в любой тег <td> параметр bgcolor="red".

Но это еще не все. Также для ячеек таблицы можно добавлять контролируемую ширину и высоту.
Атрибуты вам уже известны, однако напомнить будет не лишним:

    width — задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы).
    height — задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

Добавим в наш код эти атрибуты, и увидим что получиться:

 

<!doctype html>

   <html>

    <head>

      <title>Таблицы</title>

    </head>

    <body>

       <table bgcolor="violet" border="2"
        align="center" cellspacing="4" cellpadding="8">

         <caption>Пример таблицы</caption>

         <tr>

         <th width="60%">Столбец 1</th><th width="30%">Столбец 2</th><th width="10%">Столбец 3</th></tr>

         <tr align="center" valign="middle" bgcolor="yellow”>

         <td>№1.1 Желтый фон, текст по середине ячейки.</td>

         <td>№2.1</td>

         <td>№3.1</td></tr>

         <tr align="left" valign="bottom">

         <td>№1.2</td>

         <td>№2.2 Фон заданный для всей таблицы, текст снизу.</td>

         <td>№3.2</td></tr>

         <tr align="center" valign="top" bgcolor="red”><td>№1.3</td>

         <td>№2.3</td>

         <td>№3.3 Красный фон, текст сверху ячейки.</td></tr>

       </table>

    </body>

   </html>

 

Вид в браузере:

 

Пример атрибутов width и height

 

Как видно из примера, мы убрали width=»250″ из тела таблицы (<table>), потому что, когда выставлен общий размер таблицы, размеры столбца не будут работать корректно. В нашем же случае столбцы распределились согласно указаным значениям атрибутов — на весь размер окна браузера.

Если не задавать ширину и высоту ячейки, тогда размеры будут подтягиваться соответственно по содержимому ячейки.


 

Объединение строк и ячеек.

Обычно данную возможность используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на теге <div> и CSS.

Для объединения фрагментов таблицы существуют два атрибута:

    COLSPAN – определяет количество столбцов, на которые простирается данная ячейка.

    ROWSPAN – определяет количество рядов, на которые простирается данная ячейка.

Пример атрибута colspan:

 

<!doctype html>

   <html>

    <head>

      <title>Объединение ячеек и строк</title>

    </head>

    <body>

       <table width="715" border="1" align="center" cellspacing="0" cellpadding="10">

         <tr bgcolor="red">

         <td colspan="2" height="75">Верх таблицы</td>

         </tr>

         <tr bgcolor="gold">

         <td width="190" height="300">Левая часть</td>

         <td>Правая часть</td>

         </tr>

         <tr bgcolor="red">

         <td colspan="2" height="30">низ таблицы</td>

         </tr>

       </table>

    </body>

   </html>

 

Вид в браузере:

 

Пример атрибута colspan

 

Пример атрибута rowspan:

 

<!doctype html>

   <html>

    <head>

      <title>Объединение ячеек и строк</title>

    </head>

    <body>

       <table width="715" border="1" align="center" cellspacing="0" cellpadding="10">

         <tr bgcolor="red">

         <td rowspan="2">объединенный столбец</td>

         </tr>

         <tr bgcolor="gold">

         <td width="190" height="300">Левая часть</td>

         <td>Правая часть</td>

         </tr>

         <tr bgcolor="red">

         <td colspan="2" height="30">низ таблицы</td>

         </tr>

       </table>

    </body>

   </html>

 

Вид в браузере:

 

Пример атрибута rowspan

 

Ну что ж, практикуйтесь, хорошенько все пересмотрите и разложите для себя все по полочкам.

Удачи.

Закрыть меню