Как да направите HTML обединяване на клетки в таблица

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

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







маса граничен колапс: колапс;
>
TD граница: 1px плътно черно;
ширина: 60px;
височина: 50px;
>

Обединяване клетки хоризонтално

Да започнем с това, защото този метод е по-лесно. Да речем, че искате на първия ред от четири клетки се сляха в едно. Това може да стане с помощта на ColSpan атрибут:

  1. Изпишете желания клетъчен атрибут ColSpan = "брой клетки, което искате да се слеят"
  2. Премахване на всички ненужни клетка

Обърнете внимание на тази част от кода. Що се отнася до първата клетка в редица набор ColSpan 4. В действителност, тя се провежда четири клетки, и по тази причина, следните 3 в номера, който искате да изтриете, те просто не се нуждаят днес.

Ако те не са отстранени, в редица форми, колкото 7 клетки, и разбира се, че ще бъде много по-широк, отколкото тези двамата.

Как да се съчетаят клетки в HTML






Сега ние ги премахнете и да се види, че всичко е добре показва.

Как да се съчетаят клетки в HTML

Комбинирането на вертикално

Това е малко по-сложно и се извършва на същата технология се използва само атрибут наречен rowspan и изтриване на желаната клетка в колоната, което трябва, а не на брой, което е малко усложнява проблема, но това всъщност е лесно, ако се разбере същността на поста.

Нека да се съчетаят най-късно в редица клетка 2 и 3. За тази цел, последната клетка в редица 2 Запис rowspan = "2". Сега трябва в редица 3, за да изтриете последната клетка. Ако не го направите, след това отново, ще излезе допълнително клетка, която в голяма степен ще развалят външния вид на нашата маса.

Как да се съчетаят клетки в HTML

Комбинирането на двете страни

Една клетка може да се настрои така атрибути. Нека също да видим как тя работи. Обединяването на единична клетка 2 в първата клетка на серия 2, и първите две - 3. Общият брой на клетките 4 са комбинирани в един.

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

Как да се съчетаят клетки в HTML
Как да се съчетаят клетки в HTML