8
votes

Table HTML avec Slash fractionnant la cellule de gauche

Je me demande comment écrire dans HTML une table avec Slash fractionnement de la cellule de gauche? C'est-à-dire que, pour la cellule de gauche dans la table, il y a une ligne diagonale en deux parties, avec certains textes des deux côtés.

html html-table

0 commentaires

3 Réponses :

6
votes

Utilisez une image d'arrière-plan pour la cellule imitant la scission.

1 commentaires

Vous devrez également inclure le texte de l'image.

13
votes

Puisque HTML est basé sur des objets de la boîte, il n'ya aucun moyen d'y parvenir avec des éléments standard.

Le moyen le plus simple d'y parvenir, serait de diviser votre cellule en trois colonnes et d'utiliser une image image dans la colonne moyenne qui imite la largeur de la bordure de votre cellule de table.

text alt

Cet effet peut être atteint comme suit: xxx

Note: < / forte>

Les noms de classe fournis sont uniquement des fins uniquement, vous voudrez probablement nommer quelque chose de plus "sémantiquement approprié"
Une image appropriée sera nécessaire, dans mes tests, j'ai créé une simple ligne diagonale de 1 pixels (que vous êtes gratuitement Pour utiliser ), mais vous pouvez bien sûr être aussi créatif que vous le souhaitez. Dans l'exemple ci-dessus, l'image de fond est réglée pour aligner dans le centre absolu de la cellule, cela signifie que vous pouvez créer l'image aussi grande que vous le souhaitez afin de faire échelle en conséquence.

2 commentaires

Belle démonstration. Quel logiciel avez-vous utilisé pour créer les images?

L'image a été faite à l'aide d'Adobe Fireworks, mais aurait probablement pu être fabriquée dans une manipulation / outil de manipulation / de création de vecteur (Photoshop, Inkscape, Gimp, Illustrator, etc.)

2
votes

Deux autres idées:

Divisez l'image slash dans la moitié et utilisez-la des deux côtés (vous pouvez le retourner, enregistrer une image)

Ne pas utiliser de tables si vous faites la mise en page ... Utilisez CSS. Je pensais juste que j'ajouterais cela au cas où vous essayiez d'utiliser la tranchage d'image de Photoshop ou quelque chose comme ça. Terrible idée.

0 commentaires