HTML -tabelgrense
HTML-tabelle kan grense van verskillende style en vorms hê.
Hoe om 'n grens by te voeg
Wanneer jy 'n rand by 'n tabel voeg, voeg jy ook rande om elke tabelsel by:
Om 'n grens by te voeg, gebruik die CSS- bordereienskap op
table, th, en
tdelemente:
Voorbeeld
table, th, td
{
border: 1px solid black;
}
Ingevoude tabelgrense
Om te verhoed dat dubbele grense soos in die voorbeeld hierbo is, stel die CSS- border-collapse
eienskap op collapse.
Dit sal die grense in 'n enkele grens laat ineenstort:
Voorbeeld
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Styl tafel rande
As jy 'n agtergrondkleur van elke sel stel en die rand 'n wit kleur gee (dieselfde as die dokument agtergrond), kry jy die indruk van 'n onsigbare rand:
Voorbeeld
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Ronde Tafelgrense
Met die border-radiuseiendom kry die grense afgeronde hoeke:
Voorbeeld
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Slaan die grens om die tafel oor deur tableuit die css-kieser te laat:
Voorbeeld
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Gestippelde tabelgrense
Met die border-styleeiendom kan jy die voorkoms van die grens stel.
Die volgende waardes word toegelaat:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Voorbeeld
th, td {
border-style: dotted;
}
Rand Kleur
Met die border-coloreiendom kan jy die kleur van die rand stel.
Voorbeeld
th, td {
border-color: #96D4D4;
}