Kaip sujungti arba sujungti elementus HTML lentelėje

Naudodami „ colspan“ atributą, galite sujungti du ar daugiau lentelių langelių HTML žyma (lentelės duomenys). Pavyzdžiui, žemiau esančiame kode yra lentelė su trimis eilėmis ir trimis stulpeliais.

Jei norėjome sujungti pirmas dvi ląsteles į vieną ląstelę, galime naudoti „colspan =“ 2 atributą žyma. Numeris rodo, kiek ląstelių norite naudoti žyma.

HTML lentelės pavyzdys

Minėtas kodas, pateikiamas žiniatinklio naršyklėje, pateikia lentelę, panašią į toliau pateiktą lentelę. Kaip matote, pirmasis langelis apima dviejų stulpelių plotį.

Jei norite naudoti visas tris stalo viršuje esančias ląsteles, padidinkite colspan reikšmę iki 3, nes yra trys stulpeliai. Vertės padidinimas iki 3 suteikia jums panašią lentelę, kaip parodyta toliau.

Pastaba: įsitikinkite, kad, kai išplėsite a stulpelį, kurį pašalinsite likusius žyma. Pirmiau pateiktame pavyzdyje, nes mes naudojame visus tris stulpelius, turime tik vieną viduje konors (lentelės eilutė).

Ląstelių sujungimas naudojant WYSIWYG redaktorių

Taip pat galite naudoti WYSIWYG redaktorių, kad galėtumėte sujungti elementus. Paprastai tai daroma išryškinant dvi ar daugiau ląstelių, dešiniuoju pelės klavišu spustelėdami ląsteles ir pasirinkdami galimybę sujungti ląsteles. Toliau pateikiami papildomi veiksmai, kaip tai padaryti „Dreamweaver“ ir „Expression Web“.

Ląstelių sujungimas naudojant „Dreamweaver“

  1. Pažymėkite dvi ar daugiau ląstelių savo lentelėje.
  2. Dešiniuoju pelės mygtuku spustelėkite ant pažymėtų langelių.
  3. Spustelėkite lentelę ir tada sujungti elementus .

arba

  1. Pažymėkite dvi ar daugiau ląstelių savo lentelėje.
  2. Paspauskite klaviatūros nuorodą Alt + Ctrl + M.

Ląstelių sujungimas naudojant „Expression Web“

  1. Pažymėkite dvi ar daugiau ląstelių savo lentelėje.
  2. Dešiniuoju pelės mygtuku spustelėkite ant pažymėtų langelių.
  3. Spustelėkite Keisti ir tada Sujungti langelius .