Lärande HTML del 25: Använda bredd- och höjdattribut i HTML-tabeller
För dig som har läst HTML-läromedel tidigare är du naturligtvis bekant med bredd- och höjdattributen.
Tillämpningen av dessa två attribut är inte bara begränsad till HTML-tabeller, utan används också för att ställa in storleken på innehållet i HTML, t.ex. bilder.
För er som fortfarande inte förstår hur man gör detHTML-tabeller och attribut som vanligtvis används i HTML-tabeller, du kan titta på tidigare artiklar för att öka din förståelse innan du fortsätter till den här artikeln.
I allmänhet tillämpningen av bredd och höjdattribut<table> -taggen stöds endast av HTML4.01 men stöds inte av HTML5. Ändå bör du också veta hur du använder båda attributen i taggen <table> som lärande. Nu, för mer information om hur du använder dessa två attribut, låt oss titta på förklaringen nedan.
Breddattribut
Breddattributet i tabellen används förbestämma bredden på bordet. Om du inte ställer in tabellbredden med breddattributet kommer tabellens bredd att matcha den bredd som behövs för att visa data. Syntaxen för breddattributet är:
<table width="pixel atau %">I breddattributet finns det två värden som kan tillämpas, nämligen:
| värde | funktion |
| pixel (px) | Ställ in bredd i pixlar, till exempel: bara 400 pixlar eller 400 |
| procent (%) | Ställ in bredden i procent av de omgivande elementen, till exempel: 30% |
Följande är ett exempel på skrivkoden och att använda breddattributet i HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Width di HTML</title>
</head>
<body>
<table width="400" border="2">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>Efter att ovanstående kod har körts i webbläsaren kommer den att visas som visas nedan:
Höjdattribut
Höjdattributet i tabellen används förbestämma bordets höjd. Liksom med breddattributet, om du inte ställer in bordets höjd med höjdattributet kommer bordets höjd att matcha den höjd som krävs för att visa data. Syntaxen för höjdattributet är:
<table height="pixel atau %">I höjdattributet finns det två värden som kan tillämpas, nämligen:
| värde | funktion |
| pixel (px) | Ställ in bredd i pixlar, till exempel: endast 150 pixlar eller 150 |
| procent (%) | Ställ in bredden i procent av elementen runt det, till exempel: 10% |
Här är ett exempel på att skriva kod och använda höjdattributet i HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Height di HTML</title>
</head>
<body>
<table border="2" height="150">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>Efter att ovanstående kod har körts i webbläsaren kommer den att visas som visas nedan:
Eftersom dessa två attribut inte stöds av HTML5 rekommenderas att du använder CSS i tabellbredd och höjdinställningar. Bredden och höjdsyntaxen i CSS är:
<table style="width:400px; height:150px;">Det är allt material för att använda bredd- och höjdattribut i tabeller i HTML, förhoppningsvis kan du förstå materialet ovan.
