HTML <tabel> Merker
Voorbeeld
'n Eenvoudige HTML-tabel wat twee kolomme en twee rye bevat:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die <table>merker definieer 'n HTML-tabel.
'n HTML-tabel bestaan uit een <table>element en een of meer <tr> ,
<th> , en <td> elemente.
Die <tr>-element definieer 'n tabelry, die <th>-element definieer 'n tabelopskrif, en die <td>-element definieer 'n tabelsel.
'n HTML-tabel kan ook <caption> , <colgroup> , <thead> , <tfoot> en <tbody> elemente insluit.
Blaaierondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
Globale eienskappe
Die <table>merker ondersteun ook die Global Attributes in HTML .
Gebeurtenis eienskappe
Die <table>merker ondersteun ook die gebeurteniskenmerke in HTML .
Meer voorbeelde
Voorbeeld
Hoe om ingevoude grense by 'n tabel te voeg (met CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Voorbeeld
Hoe om 'n tabel regs te belyn (met CSS):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Voorbeeld
Hoe om 'n tabel in lyn te bring (met CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Voorbeeld
Hoe om agtergrondkleur by 'n tabel te voeg (met CSS):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Voorbeeld
Hoe om opvulling by 'n tabel te voeg (met CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Voorbeeld
Hoe om tafelwydte in te stel (met CSS):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Voorbeeld
Hoe om tabelopskrifte te skep:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
Voorbeeld
Hoe om 'n tabel met 'n byskrif te skep:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Voorbeeld
Hoe om tabelselle te definieer wat oor meer as een ry of een kolom strek:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Verwante bladsye
HTML-tutoriaal: HTML-tabelle
HTML DOM-verwysing: Tabelvoorwerp
CSS-tutoriaal: Stileertabelle
Verstek CSS-instellings
Die meeste blaaiers sal die <table>element met die volgende verstekwaardes vertoon:
Voorbeeld
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}