HTML Lists & Tables

1. HTML Lists &
Tables
БОЯН ИВАНОВ

2. Списъци в HTML
 В HTML има два вида списъци, номерирани(ordered)
и без номерация(unordered).
 “Unordered List” списъците се създават използвайки
<ul> … </ul>. “Ordered List” списъците се създават
използвайки <ol> … </ol>
 Вътре в даден списък се намират елементите, които
трябва да се подредят. Те се създават използвайки
<li> … </li>.
 По този начин HTML може да разбере как да подреде
даденият от нас текст.
2

3. Примерен списък
 Неподреден Списък
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Номериран списък
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
3

4. Различни маркери за
неподреден списък
 Възможно е да променим стандартната черна точка
в неподредените списъци в HTML използвайки CSS
свойството, list-style-marker
 Възможните опции биват :
• disc (default)
o circle
 square
none
4

5. Различни номерации за
номериран списък
 По-същия начин, номерираният списък има няколко
различни опции за номерация. Тя се избира като
използваме атрибута “type”.
1. type=“1”, подредена редица от номера(default)
2. type=“A”, азбучна редица с главни букви
3. type=“а”, азбучна редица с малки букви
4. type=“I”, подредена редица от главни римски номера
5. type=“i”, подредена редица от малки римски номера
5

6. Description List
 Също така в HTML съществува т.нар. описателен
списък. Идеята му е да предлага на потребителя
два вида елементи за описание, нормален и
вдлъбнат.
 Синтаксиса представлява :
• <dl> … </dl>, за начало на списъка
• <dt> … </dt>, за нормален елемент
• <dd> … </dd>, за вдлъбнат елемент
6

7. Nested HTML Lists
 За да получиме същия резултат с нормален списък,
може да вкараме списък в списък
 Примерно :
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
7

8. HTML Таблици
 Таблиците, както и списъците, са подредени по
близък начин. Tаблица се създава с <table>
… </table>
 Вътре в таблицата се съдържат редове. Те се
дефинират с <tr> (table row).
 Една таблица може да съдържа и главен ред, който
се дефинира с <th> (table header).
 Данните в тези редове се дефинират с <td> (table
data/cell)
8

9. Примерна HTML таблица
 <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
Firstname Lastname Age
Jill Smith 50
9

10. Заглавие на таблица
 Ако искаме да даден заглавие на нашата таблица е
нужно след дефинирането на таблицата с <table>
да се добави HTML елемента <caption> …
</caption>
 По този начин HTML може да разпознае че
даденият от нас текст е заглавието на таблицата и
така ще бъде поставен по средата на таблицата ни.
10

11. CSS и таблици
 Използвайки CSS можем да направим таблиците
ни уникални.
 CSS има няколко стойности използвани за
модифициране на таблици.
• border
• border-collapse
• padding
• text-align
• border-spacing
11

12. Kлетки и редове
 Използвайки точните атрибути е възможно да
направиме една клетка да обхваща няколко реда,
както и обратното.
 rowspan=“num” атрубта ни дава функионалността
една клетка да обхваща num на брой реда
 colspan=“num” атрубта ни дава функионалността
един ред да обхваща num на брой клетки
12

13. Пример
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<th colspan="2" style="text-align:center">Overall Billionaire</th>
</tr>
</table>
13

14. Благодаря Ви за
вниманието.
Въпроси?