Преглед на урок

Допълнителни таблични атрибути

Допълнителни таблични атрибути




След създаването на проста таблица идва ред да спомена няколко атрибута за тага <table>. Вече споменах за атрибута border, но освен него има ощя няколко много важни:

1. width - задава широчината на вашата таблица, обикновенно това става в пиксели, но може да бъде и в проценти.

Код
<table width="700" border="1">

или

Код
<table width="50%" border="1">

2. align - този атрибут ви позволява да направите "плаваща" таблица, около която текстът се пренася. Стойностите, които може да приема са left, center и right. В зависимост от това, което изберете, ако има текст той ще се разполага от другата страна на таблицата.

Код
<table align="left" border="1">

или

Код
<table align="center" border="1">

или

Код
<table align="right" border="1">

В първия пример таблицата ще бъде разположена от лявата страна на сайта, а ако имате някакъв текст ще се разположи от дясно. Във втория случай, таблицата е по средата, а текста от двете страни (тук вече в зависимост от това къде го разположите вие). И третия случай, сами се досещате - таблицата се намира от дясно на сайта, а текста от ляво.

3. cellspacing - определя колко да бъде разстоянието между стените на таблицата и между отделните клетки - т.нар междуклетъчно пространство. Стойността му трябва да бъде цяло число в пиксели.
ВАЖНО: cellspacing увеличава междуклетъчното пространство дори на border да е зададено малко число. cellspacing може да бъде използван дори без border и има същия добър ефект.

Код
<table cellspacing="10" border="1">

или

Код
<table cellspacing="10">

4. cellpadding - определя колко да бъде разстоянието между стените на клетката и данните в нея - т.нар вътреклетъчно пространство. Стойността му трябва да бъде цяло число в пиксели. Подразбиращата се настройка за този атрибут е 1, в случай, че вие не сложите този атрибут. При 0 съдържанието на клетката се залепя за стените.

Код
<table cellspacing="10">

или

Код
<table cellspacing="0">

5. rules - определя къде се изчертават линии между клетките. Стойността по подразбиране е all (ако не зададете атрибута rules в <table>, ще се използва стойноста по подразбиране. Т.е. да се показват всички линии между клетките). Останалите стойности, които може да приеме атрибута rules са:

  • none - Премахва всички линии вътре в таблицата.
  • group - Слага линии само между групите клетки (това ще го обясня в някой друг урок).
  • rows - Премахва вертикалните линии и оставя само хоризонтални.
  • cows - Обратното на rows - премахва хоризонталните линии и оставя само вертикалните.

  • Код
    <table rules="cows" border="1">

    и другите стойности се пишат по аналогичен начин.

  • frame - определя къде да има линии около таблицата. Стандартната стойност за този атрибут е border. Другите стойностите, които може да приема този атрибут са много. Ето ги и тях:
  • above - оставя само горната линия на таблицата, и маха всички странични и долната.
  • below - обратното на above - маха всички странични лини и горната и оставя само долната.
  • hsides - маха лявата и дясната линия на таблицата и оставя горната и долната.
  • lhs - оставя само лявата линия, като премахва горната, доланата и дясната.
  • rhs - оставя само дясната линия, като премахва горната, долната и лявата.
  • vsides - оставя дясната и лявата линия, а премахва горната и долната.

  • Код
    <table frame="vsides" border="1">

    и другите стойности се пишат по аналогичен начин.

    Последния табличен атрибут, който ще спомена е bgcolor. Той може да се използва както в <table>, така и в <tr>, <td> и <th>. Стойностите, които може да приема са имена на цветовете (на английски език) и три двуцифрени шестнадесетични числа, които представляват RGB (например за бяло е така - #FFFFFF). Функцията на този атрибут bgcolor е да напправи фона на цялата таблица, отделна клетка или ред в различен цвят от нормалния.

    Код
    <table bgcolor="#000000" border="1">

    или

    Код
    <table bgcolor="black" border="1">

    Автор: Adrian


    Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




    Урокът е добавен от: toddor

    Добави коментар

    Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.