Hur man kan förbättra din Instructables med HTML- (3 / 14 steg)
Steg 3: tabeller
Tabellerna är super bra som en material arrangör eller Visa data. HTML organiserar tabeller med hjälp av olika märken:
Tag | Beskrivning |
---|---|
< table > | Bord: Definierar början och slutet av en tabell |
< tbody > | Tabell kropp: En valfri tag att definiera kroppen av en tabell |
< tr > | Tabellrad: Skapar en ny rad i tabellen |
< th > | Huvud: Definierar i huvudet på en kolumn |
< td > | Tabelldata: Definierar en normal cell |
Exempel (med lite CSS att krydda saker upp):
Del | Källa |
---|---|
2 x 10KΩ motstånd | Sparkfun, RadioShack |
2 x 220Ω motstånd | |
2 x 10-47µF kondensatorer | |
2 x LEDs | |
2 x PNP transistorer |
~ ~ = Denna gemensamma del kan räddas från nästan allt
~ ~ = Du kan rädda detta, eller om det är köpt, det blir rester
Koden
< tabellkantlinjen = "1" style = "border-color: rgb (189,189,189), gränsen: 1.0px solid rgb(189,189,189);" >
< tbody >
< tr >
< th > del < /th >
< th > källa < /th >
< /tr >
< tr >
< td stil = "bakgrundsfärg: rgb(212,255,215);" > 2 x 10KΩ motstånd < /td >
< td >< en href = "https://www.sparkfun.com/products/10969" rel = "nofollow" > Sparkfun < /a >, < en href = "http://www.radioshack.com/product/index.jsp?productId=2062330" rel = "nofollow" > RadioShack < /a >< /td >
< /tr >
< tr >
< td stil = "bakgrundsfärg: rgb(212,255,215);" > 2 x 220Ω motstånd < /td >
< td >
< p >< en href = "https://www.sparkfun.com/products/10969" rel = "nofollow" > Sparkfun < /a >, < en href = "http://www.radioshack.com/product/index.jsp?productId=2062317" rel = "nofollow" > RadioShack < /a >< /p >
< /td >
< /tr >
< tr >
< td stil = "bakgrundsfärg: rgb(231,222,255);" > 2 x 10-47µF kondensatorer < /td >
< td >
< p >< en href = "https://www.sparkfun.com/products/523" rel = "nofollow" > Sparkfun < /a >, < en href = "http://www.radioshack.com/product/index.jsp?productId=12448323" rel = "nofollow" > RadioShack < /a >< /p >
< /td >
< /tr >
< tr >
< td stil = "bakgrundsfärg: rgb(231,222,255);" > 2 x LEDs < /td >
< td >
< p >< en href = "https://www.sparkfun.com/products/10969" rel = "nofollow" > Sparkfun < /a >, < en href = "http://www.radioshack.com/product/index.jsp?productId=12611319" rel = "nofollow" > RadioShack < /a >< /p >
< /td >
< /tr >
< tr >
< td > 2 x PNP transistorer < /td >
< td >
< p >< en href = "https://www.sparkfun.com/products/522" rel = "nofollow" > Sparkfun < /a >, < en href = "http://www.radioshack.com/product/index.jsp?productId=2062585" rel = "nofollow" > RadioShack < /a >< /p >
< /td >
< /tr >
< / tbody >
< / table >