Comment étendre lignes et de colonnes dans votre table de html5

Parfois, vous avez besoin d'un peu plus de souplesse dans la conception de votre table de HTML5. Jetez un oeil à une page du planificateur quotidien d'un seigneur du mal. Être un seigneur du mal est clairement une entreprise complexe. D'un point de code, les éléments qui occupent plus d'une cellule sont les plus intéressants. Concevoir pièges prend deux matinées, et l'amélioration de la cachette prend trois.

Sommaire

  • Utilisation colspan et rowspan

Jetez un oeil sur le code, et vous verrez comment cela fonctionne:

tableSpan.html

Utilisation colspan et rowspan

Mon emploi du temps
LundiMardiMercrediJeudiVendredi
DéjeunerLairavec copainsLairLairLair
MatinConception piègesAméliorer Hideout
Après-midisbires de trainsbires de trainsbires de trainsbires de trainla domination du monde
Soirrires manaicalrires manaicalrires manaicalrires manaical



Le secret de la fabrication de cellules plus grande que la valeur par défaut est deux attributs spéciaux: et.

image0.jpg

Comment étendre sur plusieurs colonnes

Les activités du matin ont tendance à se produire sur plusieurs jours. Conception pièges auront la fois lundi et mardi matin, et l'amélioration de la cachette occuperont les trois matins restants. Un autre regard sur le Matin est row- ici comment cela se fait:

 MatinConception piègesAméliorer Hideout

La cellule de conception Piège couvre plus de deux colonnes normales. L'attribut indique le nombre de colonnes cette cellule aura.

La rangée de Matin occupe toujours six colonnes. Le est une colonne de large, comme d'habitude, mais la cellule de conception Piège étend sur deux colonnes et la cellule Améliorer Hideout prend trois, qui totalise six colonnes. Si vous augmentez la largeur d'une cellule, vous devez éliminer certaines autres cellules de la ligne pour compenser.

Comment étendre sur plusieurs lignes

Une propriété liées - - permet à une cellule de prendre plus d'une rangée d'une table. Regarder en arrière à la colonne vendredi, et vous verrez la cellule World Domination prend deux intervalles de temps. (Si la domination du monde était facile, tout le monde le ferait.) Voici le code correspondant:

 Après-midisbires de trainsbires de trainsbires de trainsbires de trainla domination du mondeSoirrire maniaquerire maniaquerire maniaquerire maniaque

La rangée de Soirée n'a que cinq entrées car la cellule World Domination se prolonge dans l'espace qui serait normalement occupé par une paire.

Esquisser ce que vous voulez accomplir en premier.


» » » » Comment étendre lignes et de colonnes dans votre table de html5