Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS Списъци и таблици

CSS списъци

Свойството list позволява задаване на маркери за номерирани и неномерирани списъци, а също така като маркери могат да се задават изображения. Вида на маркерите за списъка се определя от свойството list-style-type. Стойностите за неномерирани списаци са none, disc, circle и square. Основните стойности за номериран списък са decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin и upper-roman. Версиите на Internet Explorer не поддържат стойностите decimal-leading-zero, lower-greek, lower-latin и upper-latin. Когато маркерът е изображение в IE и Opera то ще се показва малко по-високо. За да се изравни може да се използва така наречения метод cross-browser, но не си струва да си губим времето с него (виж примера в браузъра):


<!DOCTYPE html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS списъци</title>
    <style type="text/css">
    	ul.a {list-style-type:circle;}
		ul.b {list-style-type:square;}
		ol.c {list-style-type:upper-roman;}
		ol.d {list-style-type:lower-alpha;}
		ul.e{list-style-image:url('subsidiary/marker.jpg');}
	</style>
 </head>
 <body>
    <p>Примери на неномериран списък:</p>
    <ul class="a">
    	<li>Каско</li>
		<li>Имущество</li>
		<li>Гражданска</li>
	</ul>
    <ul class="b">
    	<li>Каско</li>
		<li>Имущество</li>
		<li>Гражданска</li>
	</ul>
    <p>Примери на номериран списък:</p>
    <ol class="c">
    	<li>Каско</li>
		<li>Имущество</li>
		<li>Гражданска</li>
	</ol>
    <ol class="d">
    	<li>Каско</li>
		<li>Имущество</li>
		<li>Гражданска</li>
	</ol>
    <p>Пример на маркер изображение:</p>
    <ul class="e">
    	<li>Каско</li>
		<li>Имущество</li>
		<li>Гражданска</li>
	</ul>
  </body>
</html>

CSS таблици

Ограждане на таблиците За ограждане на таблиците в CSS се използва свойството border:


    table,th,td
      {border:1px solid black;}

Така определеното ограждане ще бъде с двойна линия защото е зададено ограждане на таблицата (table), на заглавията (th) и на клетките (td). За единично ограждане на таблицата се използва свойството border-collapse:


    table
      {border-collapse:collapse;}
    table,th,td
      {border:1px solid black;}

Широчина и височина на таблиците Тези параметри на таблиците се определят със свойствата width и height. В примера по-долу широчината на таблицата е зададена на 100%, а височената на елемента th на 50 пиксела:


    table
      {width:100%;}
    th
      {height:50px;}

Изравняване на текста За изравняване на текста в таблиците се използват свойствата text-align за хоризонтално изравняване (свайства - left, right, center) и vertical-align (свайства - top, bottom, middle):


    td
      {text-align:center;}
    td
      {vertical-align:middle;}

Позициониране на съдържанието За задаване на разстояние между ограждението на таблицата и съдържанието се използва свойството padding за елементите td и th:


    td, th
      {padding:15px;}

Цветове в таблицата Цвета на огражденията на таблицата, клетките и заглавията се определя в свойството border като за стойност се задава някакъв цвят, предшестван от solid:


    table, td, th
      {border:1px solid blue;}

Цвета, например на заглавията и фона под тях се задават като стойности на свойствата color и background-color:


    th
      {color:white;background-color:red;}

Надпис на таблица Този надпис може да се зададе с елемент caption, свойството caption-side и стойности top, bottom, left и right.


    caption {caption-side:bottom;}

Самият надпис се задава в сектора body с помощтта на таг <caption>:


    <caption>Таблица 1. Списък на клиентите</caption>

По-долу е даден пример на сложна таблица, форматирането на която е зададено по id="table1". Това означава, че под друго име можете да форматирате съвсем отделна таблица (виж примера в браузъра):


<!DOCTYPE html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS таблици</title>
    <style type="text/css">
    	#table1 caption 
 		  {caption-side:top;}
    	#table1
		  {
		  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		  width:60%;
		  border-collapse:collapse;}
		#table1 td, #table1 th 
		  {
		  font-size:1em;
		  border:1px solid #0000FF;
		  padding:3px 7px 2px 7px;}
		#table1 th 
		  {
		  font-size:1.1em;
		  text-align:left;
		  padding-top:5px;
		  padding-bottom:4px;
		  background-color:gold;
		  color:#008000;}
		#table1 tr.alt td
		  {
		  color:#000000;
		  background-color:#ADD8E6;}
	</style>
  </head>
  <body>
      <table id="table1">
      <caption style="font-weight:bolder;font-size:x-large"
      >Таблица 1. Списък на клиентите</caption>
	  <tr>
      <th>Име и Фамилия</th>
      <th>Телефон</th>
      <th>Град</th>
	  </tr>
	  <tr>
      <td>Иван Иванов</td>
      <td>1111111</td>
      <td>София</td>
	  </tr>
	  <tr class="alt">
      <td>Петър Петров</td>
      <td>1111111</td>
      <td>Варна</td>
	  </tr>
	  <tr>
      <td>Георги Георгиев</td>
      <td>1111111</td>
      <td>Пловдив</td>
	  </tr>
	  <tr class="alt">
      <td>Иванка Иванова</td>
      <td>1111111</td>
      <td>Бургас</td>
	  </tr>
	  <tr>
      <td>Петя Петрова</td>
      <td>1111111</td>
      <td>Велико Търново</td>
	  </tr>
	  <tr class="alt">
      <td>Гергана Георгиева</td>
      <td>1111111</td>
      <td>Шумен</td>
	  </tr>
	  <tr>
      <td>Стамен Стаменов;/td>
      <td>1111111</td>
      <td>Добрич</td>
	  </tr>
	  <tr class="alt">
      <td>Стефан Стефанов</td>
      <td>1111111</td>
      <td>Брацигово</td>
	  </tr>
	  <tr>
      <td>Алекси Алексиев</td>
      <td>1111111</td>
      <td>Трявна</td>
	  </tr>
	  <tr class="alt">
      <td>Александра Александрова</td>
      <td>1111111</td>
      <td>Видин</td>
	  </tr>
	  </table> 
  </body>
</html>