Обединяване на клетки от таблица

Комбинирането на клеткитаблици се вижда най-добре с помощта на простата таблица, показана в листинг 5-10 в HTML.

обединяване

Това е обикновена таблица, чиито клетки са номерирани - така че ще ни бъде по-лесно в бъдеще. На фиг. 5.2 показва външния му вид в прозорец на уеб браузър.

Сега разгледайте таблицата на фиг. 5.3.

Тук някои клетки са обединени. Вижда се, че обединените клетки сякаш са се слели в една. Как да го направим?

Специално за този етикети поддържа два много забележителни незадължителни атрибута. Първият - COLSPAN -комбинира клетки хоризонтално, вторият - ROWSPAN - вертикално.

обединяване

За да обедините няколко клетки хоризонтално в една, следвайте тези стъпки.

1. Намерете тагав HTML кода( ), съответстваща на първата от обединените клетки (ако клетките се броят отляво надясно).

2. Въведете атрибута COLSPAN в него и му задайте броя на клетките, които да се комбинират, като броите и първата.

3. Премахнете тагове( ), които създават останалите обединени клетки на дадения ред.

Нека обединим клетки 2 и 3 от таблицата (вижте списък 5.10). Коригираният кодов фрагмент, който създава първия ред на тази таблица, е показан в листинг 5-11.

таблица

По същия начин ще създадем комбинираните клетки 4 + 5 и 12 + 13 + 14 + 15.

Обединяването на клетки вертикално е малко по-сложно. Ето стъпките, които трябва да следвате за това.

1. Намерете низ в HTML кода (таг), който съдържа първата от обединените клетки (ако броите редовете отгоре надолу).

2. Намерете тагав кода на този ред( ), съответстваща на първата от обединените клетки.

3. Въведете атрибута ROWSPAN в него и му задайте брояклетки за обединяване, като броите ипървият от тях.

4. Вижте следващите редове и премахнете етикетитеот тях( ), които създават останалите обединени клетки.

Остава дакомбинираме клетки 1 и 6 от нашата таблица. Списък 5-12 съдържа коригирания фрагмент от нейния HTML код (корекциите засягат първия и втория ред).

клетки

Имайте предвид, че премахнахме етикетаот втория ред.Това създава шестата клетка, защото е обединена с първата клетка.

Обединяване на клетки сега не се използва много често. Въпреки това, в разцвета на табличния уеб дизайн, беше трудно да се намери таблица безобединени клетки. Така или иначе, не е зле да знаете за това.