Kursen består av 3 delar

Relevanta dokument
En introduktion till HTML

Produktion för tryckta medier och webb

Internet A. HTML Grunder Maximilien Chiang 1

ORDLISTA WEBBDESIGN 100P

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Inför prov 1 i webbdesign

Att berätta med webb + En introduktion till HTML

Lektion 2 - CSS. CSS - Fortsätt så här

TNMK30. Elektronisk publicering

Introducerande övningar i HTML

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

20/01/2016. html och css

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

En grundkurs i hemsidor och hur de är uppbyggda

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

Laboration 2: Xhtml och CSS.

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

F02 En första sida. Dagens agenda

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p

Övning (X)HTML 2. Sidan 1 av

Föreläsning 4. CSS Stilmallar för webben

Övnings hemtentamen med förslag till lösning, webbprogrammering

Lektion 2 Del 1 Kapitel 6

WEBBUTVECKLING Kursplanering

F07 Stilmallar Dagens agenda

Lektion 3 HTML, CSS och JavaScript

Webbdesign vt Innehållsförteckning

CSS- Cascading Stylesheets

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20

Manual för visionutv.net Redigera

Integrerad i egen cup-portal Sid 1

CSS-övningar. 1. Grunder

Introduktion till programmering

T a b e l l e r - t a b l e s

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

HTML & webbteknik. Introduktion till HTML. Formatering. Struktur HTML. Uppdelning. Hur man skapar hemsidor. Öppen standard W3C. Plattformsoberoende

<header> </header> <footer> </footer>

Webbdesign vt Innehållsförteckning

Språk för webben introduk4on 4ll HTML

En bortsprungen katt

En stiligare portal Laboration 3

Labora&on 2 HTML och validering övningar/uppgi:er

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

Tentamen ITK:P2. Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng.

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Laboration med Internet och HTML

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Bilder. Bilder och bildformat

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Cascading Style Sheets (CSS) An Introduction. Nayeb Maleki

Nätet. Uppgiften. Nivå

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT Mitthögskolan ITM Telefon

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Guide för att skapa & ändra Sidor och Statiska block - Speedcom E-Handel

För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)

TNMK30. Elektronisk publicering

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

Webbutveckling Laboration 1: HTML5 och CSS3.

WEBDESIGN A - DTR 1210

Webbstandarder för fler än en plattform

WEBDESIGN A - DTR 1210

Labora&on 4 CSS och validering övningar/uppgi9er

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Lektion 1, Del1, Kapitel 4

Labora&on 7 Syfte med laborationen:

TDDD52 CSS. Färger. Färger 1/3/13

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Införande av CSS i existerande tabellbaserat HTML-dokument

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

TNMK30 - Elektronisk publicering

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Webbteknik för ingenjörer

HTML, SGML, CSS, XML, XHTML, MIME, HTTP

HTML. Introduktion till HyperText Markup Language

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).

Handbok HTML. Vi utvecklar kontinuerligt nya titlar, besök för aktuell statuslista. Gör din beställning direkt i vår webbutik.

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

Att styla webbsidor. Nivå. Uppgiften

Optimering av webbsidor

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Transkript:

Kursen består av 3 delar Hur man gör webbsidor med korrekt funktionalitet och utseende Hur man använder JavaScript för att få en mer interaktiv webbbsida Hur man använder ett publiceringssystem för att göra sin webbsida

Självregistrering Ni måste registrera er själva via webben! Det är inte samma sak som att registrera sig som användare på Moodle Registering görs via följande hemsida: http://www.tfe.umu.se/student/kursregistrering/ Registreringen är öppen 7-14 december

Registrering på Moodle Ni ska också registrera er som användare på Moodle-sidan Det gör ni via kursens hemsida: http://www.moodle2.tfe.umu.se/course/view.php?id=144

Betyg Bestäms utifrån ert resultat på laborationerna 3 Alla laborationer godkända 4 Alla laborationer godkända 3 pluspoäng (3VG eller 1VG + 1 MVG) 5 Alla laborationer godkända Pluspoäng på alla uppgifter 4 pluspoäng (2VG + 1MVG)

Laborationer A305, A306, A307 Labsalar bokade på förmiddagen fram till kursens slut Ni har förtur till datorerna då En annan kurs har bokat labben på eftermiddagen så då har de förtur

En introduktion till HTML

HTML Markeringsspråk (MarkUp Language) - strukturerar dokument för Webben (World Wide Web) Dokumentet delas upp i komponenter med hjälp av element eller taggar starttaggar och sluttaggar <p>detta är ett stycke text</p> <h1>detta är en rubrik troligen med stor font</h1>

Försök inte att göra ett snyggt HTML-dokument. HTML beskriver bara strukturen hos dokumentet inte hur det skall se ut på läsarens skärm. Utseendet styrs i ett separat style-dokument en.css-fil Det är browsern, skärmens upplösning och css-filen som slutligen bestämmer hur ditt dokument ser ut

Vad är en tagg? <TAGG> innehåll </TAGG> Start-tagg Slut-tagg HTML-container

Taggens utseende <FONT SIZE="6"> Hej </FONT> Element Attribut Värde Element Instruktion till webbläsaren Attribut Tillägg för att beskriva taggen Värde Värdet för attributet

HTML dokumentets struktur TITLE HEAD HTML BODY

Grundläggande dokument <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>basdokument</title> </head> <body> <p>hello world</p> </body> </html>

XML version Deklarationen <?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="iso-8859-1"?> Skall alltid placeras överst i dokumentet före alla andra taggar

XHTML version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Anger vilken standard som dokumentet följer och var man kan hitta denna standard

HTML - taggen Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML dokumentet omgivet av starttaggen <HTML> och sluttaggen </HTML> HTML taggen innesluter taggarna <head> </head och <body> </body> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en > HTML- taggen kan ha språkattribut XMLNS är referens till Extended Markup Language Name Space

Head Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation titel, sökord, författarnamn med mera Mellan body-taggarna finns det egentliga dokumentet

Ett mycket enkelt exempel

Head Ligger alltid under taggen <html> Mellan starttaggen och sluttaggen kan dessa element finnas base link meta script style title

Base Med elementet <base> kan man ange en basadress. Bilden som finns på adress http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/bil.j pg Kan enklare hittas med hjälp av basadressen http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/ och filnamnet bil.jpg

Exempel - base <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://www.tfe.umu.se/courses/systemteknik/xhtml/" ></base> <title>elementet BASE</title> </head> <body> <p>titta en bil</p> <p><img src="bil.jpg" alt="bil"/> </p> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/icons/valid-xhtml10" alt="valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </body> </html>

Link Elementet link används för att referera till externa resurser Det kan finnas flera Link-element i ett html-dokument En vanlig användning är att ge en referens till.css filer d.v.s. filer som information om hur dokumentet skall se ut på skärmen

Link grundläggande Attribut href specificerar var resursen finns - href="stajl.css" Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. Media specificerar målmedium screen är det som gäller om ingenting anges (default) - media="screen" andra media är tty, tv, projection, handheld, print, braille, aural och all type anger mediatyp type="text/css" Det kan exempelvis vara text/css eller text/javascript

Link ett exempel <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="stajl.css" media="screen" type="text/css" /> <title>elementet LINK</title> </head> <body> <h1>min BIL</h1> <p><img src="bil.jpg" alt="bil"/> </p> <p>titta en bil</p> </body> </html>

Meta Meta elementet används för att specificera data kring dokumentet vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera KEYWORDS nyckelord som kan användas av sökmotorer AUTHOR - författarnamn DESCRIPTION kort beskrivning visas av sökmotorn som sammanfattning av dokumentet DISTRIBUTION - specificerar om dokumentet är globalt eller regionalt

Meta exempel <meta name="description" content= Grundkurs i hur man skriver XHTML-kod /> <meta name="keywords" content="xhtml, css" /> <META name="author" content= Ulf Holmgren /> <META name="copyright" content=" 2007 TFE. /> <META name="date" content= 2007-11-10 />

Meta - exempel <-- For speakers of US English --> <META name="keywords" lang="en-us" content= color, New York"> <-- For speakers of British English --> <META name="keywords" lang="en" content= colour, London">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>meta-element</title> <meta name="autor" content="ulf Holmgren" /> <meta name="keywords" content="html, CSS, easy" /> <meta name="description" content="this is an easy course in XHTML" /> </head> <body> </body> </html>

Script och Style Elementet Style används för att bädda in information om exempelvis fonter, färger, marginaler etc. Denna information bör läggas i ett separat dokument -.css Elementet Script används för att bädda in script som styr beteende om sidan detta behandlas inte i detta sammanhang

Title Elementet Title används för att identifiera dokumentet titeln brukar visas övers i det fönster där dokumentet visas <title>xhtml Title Tag</title> Det får bara finnas en title-tag i dokumentet

Text eller innehåll Det här avsnittet handlar om <p> brödtexten <H1> till <H6> rubriker av olika dignitet <br> ny rad utan att skapa ett nytt stycke Speciella tecken % & Förstärkning <em> och <strong>

<p> P markerar ett stycke (paragraph) I stycket kan det finnas text och bilder samt inlinekod P används för att strukturera texten att dela upp den i stycken man skall inte användas för att formge dokumentet. Detta skall istället göra i ett separat style-dokument Webbläsarna brukar lämna en tom rad mellan dokumentets stycken Får finnas inuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH

<br> och Den text som skrivs in mellan starttaggen <p> och sluttaggen </p> betraktas som ett flöde av asciitecken de radbrytningar som du skriver i editorn kommer inte att visas i webbläsaren. Extra mellanslag och radbrytningar måste markeras med taggen <br> för radbrytning eller

<br>, och ä <body> <p>alternativ 1: Titta en bil Den är jättefin </p> <p>alternativ 2:<br/>Titta en bil <br/> den är jättefin</p> </body>

Andra specialtecken <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>p-element</title> </head> <body> <p> cent<br/> ± plus-minus<br/> copy <br/> µ mikro<br/> pund</p> </body> </html> MER: http://www.w3.org/tr/html401/sgml/entities.html

Rubriker Rubriker finns av sex storlekar Normalt är <h1> störst och <h6> minst, men det styr du i ditt stylesheet <h1>rubrik 1</h1> <h2>rubrik 2</h2> <h3>rubrik 3</h3> <h4>rubrik 4</h4> <h5>rubrik 5</h5> <h6>rubrik 6</h6>

Att förstärka delar av texten med <em> och <strong> <body> <p>detta är en himla rolig historia:<br/> - har du <strong>julgransfot</strong><br/> - ja de har jag<br/> - hur får du då på dig <em>byxorna</em></p> <p> </body>

Citat <blockquote> och <q> Att markera citat i sin HTML-kod är att sätt att underlätta enhetlig formattering samt att underlätta för synskadade att rätt uppfatta texten De element som används är blockquote och q

Citat ett exempel <body> <p>om man Googlar på <q>roliga citat</q> så kan man hitta följande om Bill Gates</p> <blockquote cite="http://www.jesper.nu/artiklar/h umor/citat/blandat.php"><p> 640 kb borde vara tillräckigt för vem som helst</p> </blockquote> <p>och det kan man ju tyckas vara roligt så här i efterhand</p> </body>

Ytterligare element för logisk formattering <p>definition - <dfn>tjur=kopappa</dfn> </p> <p>kod - <code>u=sin(2*pi*200*t</code> </p> <p>exempel - <samp>exempel</samp></p> <p>tangentbord - <kbd>knatter knatter knatter</kbd> </p> <p>variabel - <var>svaret=5</var> </p> <p>citat - <cite>two bee or not two bee</cite> </p> <p>en förkortning - <abbr>t.ex.</abbr> </p> <p>akronym - <acronym>xhtml</acronym> </p>

Adresser <address> Kontaktperson för XHTML-föreningen <br/> Eva Andersson<br/> Skogsstigen 8<br/> 903 45 Umeå </address>

Preformatterad text <p> Detta stycke är oformatterat och omgivet bara av p- taggarna. Läsaren kommer inte att bry sig om radbrytningar om det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör</p> <pre width="20"> Detta block kommer att vara maximalt 20 tecken brett och radbrytningarna kommer att finnas kvarom det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör </pre>

Div och span är Containrar som används tillsammans med CSS <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>div and span ELEMENT</title> <link rel="stylesheet" href="stajl2.css" media="screen" type="text/css" /> </head> <body> <div class="kontainer1"> asd ssdlk ss sfk jkk aj s </div> <div class="kontainer2"> asd ssdlk ss sfk jkk aj s </div> body { background-color: #def; margin-left: 30px; margin-top: 20px; } p span {color: green}.kontainer1 {font-family: verdana, arial, sans-serif; color: black;}.kontainer2 {margin-left: 20px;color: yellow;color: blue;}.kontainer3 {margin-left: 30px;color: green;} <p> asd ssdlk <span>ss</span> sfk jkk aj s </p> <div class="kontainer3"> asd ssdlk ss sfk jkk aj s </div> </body> </html>

HTML används för logisk formatering inte för utseende I HTML-dokumentet skall du formattera logiskt Dessa ord ska framhävas Detta är en tabell Detta är en länk Detta är en rubrik MEN du ska inte använda HTML för att styra utseendet hos sidan du ska inte ange kursiv stil, stilstorlek eller font i HTML Lämna detta till stilmallen CSS-dokumentet

Så här ser index dokumentet ut i en frames-struktur

Och så här blir resultatet

Exempel Om du börjar titta på HTML-sidor med dina nya kunskaper kommer du att hitta många konstruktioner som bygger på frames. Ett enkelt exempel hittar du på http://www.tfe.umu.se/courses/elektro/html/

Länkar En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster Länken består av En startpunkt ett ankare Ett mål en target En destination När du klickar på länken kommer du att flyttas till en annan plats en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mailhanterare.

Tre varianter av länkar <p> <a href="tfn_lista.html">telefonlista i separat dokument</a> </p> <p> <a onclick="window.open(this.href); return false;" href="tfn_lista.html">telefonlista i nytt fönster</a> </p> <p><a href="#tfnlista">telefonlista i detta dokument</a></p>

Tre andra typer av länkar <p> <a href="http://www.w3.org/tr/html401/sg ml/entities.html">specialtecken</a><br/ > <a href="mailto:nisse@gmail.com">skicka mail till Nisse</a> </p><br/> <a href="http://www.franzose.de/en/?gclid= CMbw2tuG0I8CFQRgMAodhWiZzA"><IM G SRC="bil6.jpg" ALT="bild på bil"></a><br/> <p>

Bilder Läggs in i dokument med <IMG> taggen Finns aldrig i dokumentet, utan separat fil "länkas" in Attribut: SRC="bildfil" HEIGHT="pixlar" "procent" WIDTH="pixlar" "procent" BORDER="pixlar" ALT="Text om inte bilden visas" ALIGN="left" "center" "right" VALIGN="top" "middle" "right"

Bildexempel <IMG SRC="bild.gif" BORDER="2"> <IMG SRC="mapp/bild.gif"> <IMG SRC="http://www.google.com/images/hp0.gif">

Länka med bilder <A HREF="http://www.google.com"> <IMG SRC="http://www.google.com/image s/hp0.gif"> </A>

Image maps hotspot bild Bilder med klickbara områden (länkar) 2 typer - Serverside (används ej längre) - Clientside

Image map taggarna Taggen <IMG> används som vanligt för att visa bilden (med attributet USEMAP) Skapas med <MAP> taggen Attribut: NAME="kartnamn" Områdena definieras med <AREA> Attribut: SHAPE="CIRCLE" "RECT" "POLYGON" COORDS="x,y,d" "x1,y1..." HREF="url"

Image map exempel <IMG SRC="bild.jpg" USEMAP="#karta"> <MAP NAME="karta"> <AREA SHAPE="CIRCLE" COORDS="50,50,25" HREF="http://www.dn.se"> <AREA SHAPE="RECT" COORDS="100,100,150,150" HREF="http://www.aftonbladet.se"> <AREA SHAPE="POLYGON" COORDS="0,0,50,20,40,60,10,30" HREF="http://www.tidningen.to"> </MAP>

Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen

Tabeller Används för att presentera data prydligt uppspaltat "Osynliga" tabeller används för positionering av text och bilder (layout) Skapas med taggen <TABLE> Tabellrader skapas med <TR> Tabellceller på raderna med <TD>

Så här ser grundstrukturen ut för en tabell <table> <caption>tabellrubrik</caption> <tr> <th>kolumn <br/> rubrik 1</th> <th><h3>kolumn<br/>rubrik 2</h3></th> </tr> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> </table>

border Anger bredden på ramen runt varje element angivet i pixlar. cellpadding Anger hur mycket luft det skall vara mellan cellens innehåll och ramen cellspacing Anger hur mycket luft det ska vara mellan ramen och nästa cell. summary En text som beskriver tabellens innehåll texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. width Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger.

Slå ihop celler horizontellt Cell 1 Cell 3 Cell 4

Colspan <TABLE> <TR> <TD COLSPAN="2">Cell 1</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>

Slå ihop celler vertikalt Cell 2 Cell 1 Cell 4

Rowspan <TABLE> <TR> <TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 4</TD> </TR> </TABLE>

Border

Cellpadding

Cellspacing