Standard-HTML-tabeller ser ganska underväldigande ut – släng upp dem med några snygga CSS-effekter.
Att lägga till en tabell på din webbplats är ett användbart sätt att presentera stora mängder information tydligt. Tabeller ger också en effektiv användning av utrymmet och gör att du lättare kan läsa och jämföra komplexa data.
Du kan designa tabeller så att de blir mer visuellt tilltalande med CSS. Att göra det kan också förbättra den övergripande användarupplevelsen för din webbplats.
Modern design för enstaka rader och kolumner
Du kan lägga till en enkel tabelldesign med enstaka rader och kolumner och inga sammanslagna celler. Att styla tabellen säkerställer också att din webbsida är engagerande för användaren. Förutom bordsstyling finns det andra coola HTML-effekter och CSS visa webbplatslayouter du kan lägga till på din webbplats.
Du kan se koden för denna övning i dess GitHub repo.
- Lägg till den grundläggande HTML-kodstrukturen i en ny HTML-fil:
html>
<html>
<huvud>
<titel>Mitt enkla bordtitel>
huvud>
<kropp>
kropp>
html> - Lägg till tabelltaggar inuti brödtexten:
<tabell>
tabell> - HTML-tabellelementet bör innehålla tabell rad taggar för varje rad i tabellen. Den översta raden används vanligtvis för rubriker. Använda sig av tabellhuvud HTML-taggar för att representera varje kolumn i tabellen:
<tr>
<th>Rubrik 1th>
<th>Rubrik 2th>
<th>Rubrik 3th>
tr> - Lägg till fler rader under rubrikraden. Använda sig av tabelldata HTML-taggar för att lägga till data i varje cell i tabellen:
<tr>
<td>Rad 1, kolumn 1td>
<td>Rad 1, kolumn 2td>
<td>Rad 1, kolumn 3td>
tr>
<tr>
<td>Rad 2, kolumn 1td>
<td>Rad 2, kolumn 2td>
<td>Rad 2, kolumn 3td>
tr>
<tr>
<td>Rad 3, kolumn 1td>
<td>Rad 3, kolumn 2td>
<td>Rad 3, kolumn 3td>
tr>
<tr>
<td>Rad 4, kolumn 1td>
<td>Rad 4, kolumn 2td>
<td>Rad 4, kolumn 3td>
tr>
<tr>
<td>Rad 5, kolumn 1td>
<td>Rad 5, kolumn 2td>
<td>Rad 5, kolumn 3td>
tr> - Lägg till en stiltagg inuti head-taggen. Lägg till lite allmän stil till tabellen, som skuggor, rundade bordshörn, typsnitt och marginaler:
<stil>
tabell {
gränskollaps: kollaps;
bredd: 100%;
Färg: #333;
typsnittsfamilj: Arial, sans serif;
textstorlek: 14px;
textjustera: vänster;
gräns-radie: 10px;
svämma över: dold;
box-skugga: 0 0 20pxrgba(0, 0, 0, 0.1);
marginal: bil;
marginal-top: 50px;
marginal-botten: 50px;
}
stil> - Stil tabellhuvudet för att ge det en bakgrundsfärg och justerad text:
tabellth {
bakgrundsfärg: #ff9800;
Färg: #fff;
teckensnittsvikt: djärv;
stoppning: 10px;
textomvandling: versal;
teckenavstånd: 1px;
border-top: 1pxfast#fff;
gräns-botten: 1pxfast#ccc;
} - Stil tabellraderna för att växla mellan grå och vita färger och för att lägga till en effekt när du håller muspekaren över raden:
tabelltr:nth-child (jämn)td {
bakgrundsfärg: #f2f2f2;
}tabelltr:svävatd {
bakgrundsfärg: #ffedcc;
} - Formatera data inuti cellerna i tabellen:
tabelltd {
bakgrundsfärg: #fff;
stoppning: 10px;
gräns-botten: 1pxfast#ccc;
teckensnittsvikt: djärv;
} - Öppna din HTML-fil för att se tabellen i en webbläsare:
Flerfodrat cellbordsdesign
Vissa tabeller innehåller kolumner med sammanslagna rader för att bilda en cell med flera rader.
- Ta bort alla aktuella tabellrader, behåll bara den översta med rubrikerna:
<tabell>
<tr>
<th>Rubrik 1th>
<th>Rubrik 2th>
<th>Rubrik 3th>
tr>
tabell> - Skapa en cell med flera rader med attributet rowspan. Detta kommer att expandera den cellen över det angivna antalet rader.
Sektion 1
<tr>
<tdradspann="2">Multi-line celltd>
<td>Rad 1, kolumn 2td>
<td>Rad 1, kolumn 3td>
tr>
<tr>
<td>Rad 2, kolumn 2td>
<td>Rad 2, kolumn 3td>
tr> - När du lägger till ytterligare en flercellig rad med ett annat radspansvärde, lägg till motsvarande antal tabellrader HTML-taggar. Detta för att matcha höjden eller antalet rader som cellen sträcker sig över. Till exempel, om en cell har ett radspann på 3, måste du lägga till tre rader i de andra kolumnerna för att justera tabellen korrekt.
Sektion 2
<tr>
<tdradspann="3">Multi-line celltd>
<td>Rad 3, kolumn 2td>
<td>Rad 3, kolumn 3td>
tr>
<tr>
<td>Rad 4, kolumn 2td>
<td>Rad 4, kolumn 3td>
tr>
<tr>
<td>Rad 5, kolumn 2td>
<td>Rad 5, kolumn 3td>
tr> - Öppna din HTML-fil för att se tabellen i en webbläsare:
Sammanslagen radbordsdesign
I likhet med celler med flera rader kan tabeller också ha rader som sammanfogas över flera kolumner.
- Ta bort alla aktuella tabellrader, behåll bara den översta med rubrikerna:
<tabell>
<tr>
<th>Rubrik 1th>
<th>Rubrik 2th>
<th>Rubrik 3th>
tr>
tabell> - Lägg till fler tabellrader i tabellen. Använd attributet colspan för att slå samman en av raderna i tre kolumner:
Sektion 1
<tr>
<tdstil="bakgrundsfärg: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>Rad 2, kolumn 1td>
<td>Rad 2, kolumn 2td>
<td>Rad 2, kolumn 3td>
tr>
<tr>
<td>Rad 3, kolumn 1td>
<td>Rad 3, kolumn 2td>
<td>Rad 3, kolumn 3td>
tr>
<tr>
<td>Rad 4, kolumn 1td>
<td>Rad 4, kolumn 2td>
<td>Rad 4, kolumn 3td>
tr> - Lägg till ytterligare en sammanslagen rad för att separera sektionerna i tabellen:
Sektion 2
<tr>
<tdstil="bakgrundsfärg: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>Rad 6, kolumn 1td>
<td>Rad 6, kolumn 2td>
<td>Rad 6, kolumn 3td>
tr>
<tr>
<td>Rad 7, kolumn 1td>
<td>Rad 7, kolumn 2td>
<td>Rad 7, kolumn 3td>
tr>
<tr>
<td>Rad 8, kolumn 1td>
<td>Rad 8, kolumn 2td>
<td>Rad 8, kolumn 3td>
tr> - Öppna din HTML-fil för att se tabellen i en webbläsare:
Använd attraktiva tabeller för att få ut det bästa av din data
HTML-tabeller är ett utmärkt sätt att visa strukturerad data på din webbplats. Du kan styla dem med CSS för att förbättra standardutseendet. Se dock till att du inte låter dig ryckas med och använd tabeller för layout – av tillgänglighetsskäl, behåll dem strikt för data.
Större tabeller kan vara mödosamma att skapa och uppdatera, speciellt om du använder dig av kolumner och rader som spänner över. Du kan skriva din egen kod för att generera markeringen eller dra nytta av vänligare syntaxer som Markdown.