Användarhandbok Avbryt

Visa innehåll med tabeller

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen
  19. Felsökning
    1. Korrigerade problem
    2. Kända fel

 

 

Lär dig presentera innehåll på webbplatsen med tabeller. Lär dig även dela upp och kombinera tabellceller och att importera och exportera tabelldata.

Tabeller är ett kraftfullt verktyg för att visa tabelldata och utforma text och grafik på en HTML-sida. En tabell består av en eller flera rader, och varje rad består av en eller flera celler. Även om kolumner vanligtvis inte anges uttryckligen i HTML-kod kan du i Dreamweaver ändra såväl kolumner som rader och celler.

Dreamweaver visar tabellbredden och kolumnbredden för alla tabellkolumner när tabellen är markerad, eller när insättningspunkten är inuti tabellen. Bredvid bredderna finns pilar för tabellrubrikmenyn och kolumnrubrikmenyn. Använd menyerna för att snabbt få åtkomst till vanliga tabellkommandon. Du kan aktivera och inaktivera bredderna och menyerna.

Om du inte kan se bredden på tabellen eller på en kolumn har den tabellen eller kolumnen ingen angiven bredd i HTML-koden. Om två tal visas stämmer inte den visuella bredden, så som den visas i designvyn, överens med bredden som anges i HTML-koden. Det här kan hända när du ändrar storlek på en tabell genom att dra dess nedre högra hörn, eller när du lägger till innehåll i en cell och innehållet är större än cellens angivna bredd.

Om du till exempel anger en kolumns bredd till 200 pixel och sedan lägger till innehåll som sträcker ut bredden till 250 pixlar, kommer två tal att visas för kolumnen: 200 (bredden som anges i koden) och (250) inom parentes (kolumnens visuella bredd så som den visas på din bildskärm).

Obs!

Du kan också utforma sidorna med CSS-placering.

Tabellformateringsföreträde i HTML

När du formaterar tabeller i designvyn kan du ange inställningar för hela tabellen eller för utvalda rader, kolumner och celler i tabellen. När en egenskap, till exempel bakgrundsfärg eller justering, har ett värde för hela tabellen och ett annat värde för enskilda celler, har cellformateringen företräde framför radformateringen, som i sin tur har företräde framför tabellformateringen.

Företrädesordningen för tabellformatering är följande:

  1. Celler
  2. Rader
  3. Tabell

Om du till exempel anger blå bakgrundsfärg för en enskild cell och sedan anger gul bakgrundsfärg för hela tabellen, ändras inte den blå cellen till gul. Det beror på att cellformateringen har företräde framför tabellformateringen.

Obs!

När du anger egenskaper för en kolumn ändrar Dreamweaver attributen för td-taggen för varje cell i kolumnen.

Om att dela och slå samman tabellceller

Du kan slå samman hur många angränsande celler som helst, förutsatt att markeringen är en rad eller rektangel med celler, och skapa en enda cell som sträcker sig över flera kolumner eller rader. Du kan dela en cell i hur många rader och kolumner som helst, oavsett om den har slagits samman tidigare eller inte. I Dreamweaver omstruktureras tabellen automatiskt (och nödvändiga colspan- och rowspan-attribut infogas) så att den angivna strukturen uppnås.

I följande exempel har cellerna i mitten av de två första raderna slagits samman till en enda cell som sträcker sig över två rader.

Sammanslagna celler

Infoga en tabell och lägga till innehåll

Använd panelen Infoga eller Infoga-menyn när du vill skapa en ny tabell. Sedan lägger du till text och bilder i tabellcellerna på samma sätt som du lägger till text och bilder utanför en tabell.

  1. Placera insättningspunkten där du vill att tabellen ska visas.

    Obs!

    Om dokumentet är tomt kan du bara placera insättningspunkten i början av dokumentet.

    • Välj Infoga > Tabell.

    • Klicka på Tabell i kategorin HTML på panelen Infoga.

  2. Ange attributen för dialogrutan Tabell och klicka på OK för att skapa tabellen.
    Skapa en tabell
    Skapa en tabell

    Rader

    Anger antalet tabellrader.

    Kolumner

    Anger antalet tabellkolumner.

    Tabellbredd

    Anger tabellens bredd i pixlar eller som en procentandel av webbläsarfönstrets bredd.

    Kanttjocklek

    Anger bredden på tabellens kanter i pixlar.

    Cellmellanrum

    Anger antalet pixlar mellan angränsande tabellceller.

    Obs!

    När du inte uttryckligen anger värden för kanttjocklek eller cellmellanrum och cellfyllnad, visar de flesta webbläsare kanttjockleken och cellfyllnaden som om de har värdet 1 och cellmellanrummet som om det har värdet 2. Om du vill att webbläsarna ska visa tabellen utan kant, fyllnad och mellanrum anger du värdet 0 för Cellfyllnad och Cellmellanrum.

    Cellfyllnad

    Anger antalet pixel mellan en cells kant och dess innehåll.

    Ingen

    Kolumn- och radrubriker aktiveras inte för tabellen.

    Vänster

    Gör den första kolumnen i tabellen till en kolumn för rubriker, så att du kan ange en rubrik för varje rad i tabellen.

    Överst

    Gör den första raden i tabellen till en rad för rubriker, så att du kan ange en rubrik för varje kolumn i tabellen.

    Båda

    Gör så att du kan ange kolumn- och radrubriker i tabellen.

    Obs!

    Det är bra att använda rubriker, ifall någon av besökarna på webbsidan använder skärmläsare. Skärmläsare läser tabellrubriker och hjälper användaren att hålla reda på tabellinformation,

    Rubrik

    Tillhandahåller en tabellrubrik som visas utanför tabellen.

    Sammanfattning

    Visar en tabellbeskrivning. Skärmläsare läser sammanfattningstexten, men texten visas inte i användarens webbläsare.

Importera och exportera tabeller

Du kan importera tabelldata som har skapats i andra program (till exempel Microsoft Excel) och sparats i ett format med avgränsad text (med objekt som separeras med tabbtecken, komman, kolon eller semikolon) i Dreamweaver och formatera dem som en tabell.

Du kan också exportera tabelldata från Dreamweaver till en textfil med innehållet i angränsande celler separerade med en avgränsare. Komman, kolon, semikolon och mellanslag kan användas som avgränsare. När du exporterar en tabell exporteras hela tabellen. Du kan inte välja att exportera delar av en tabell.

Obs!

Om du bara vill ha vissa data från en tabell, till exempel de första sex raderna eller de första sex kolumnerna, kopierar du cellerna som innehåller dessa data och klistrar in dem utanför tabellen (för att skapa en ny tabell). Sedan exporterar du den nya tabellen.

Importera tabelldata

  1. Välj Arkiv > Importera > Importera tabelldata.

  2. Ange alternativen för tabelldata och klicka på OK.

    Datafil

    Namnet på filen som ska importeras. Klicka på Bläddra för att välja en fil.

    Avgränsare

    Den avgränsare som används i filen som ska importeras.

    Om du väljer Annan visas en textruta till höger om snabbmenyn. Ange avgränsaren som används i din fil.

    Obs!

    Ange avgränsaren som användes när datafilen sparades. Om du inte gör det importeras inte filen på rätt sätt, och data formateras inte korrekt i en tabell.

    Tabellbredd

    Tabellens bredd.

    • Välj Anpassa efter data om du vill att kolumnerna ska bli breda nog för att passa den längsta textsträngen i kolumnen.

    • Välj Ställ in för att ange en fast tabellbredd i pixlar eller som en procentandel av webbläsarfönstrets bredd.

    Kant

    Anger bredden på tabellens kanter i pixlar.

    Cellfyllnad

    Antalet pixlar mellan cellens innehåll och cellgränserna.

    Cellmellanrum

    Antalet pixlar mellan angränsande tabellceller.

    Obs!

    Om du inte uttryckligen anger värden för kanter, cellfyllnad och cellmellanrum, visar de flesta webbläsare tabellen med kanter och cellfyllnad som har värdet 1 och cellmellanrum med värdet 2. Om du vill att webbläsarna ska visa tabellen utan marginaler och mellanrum anger du värdet 0 för Cellfyllnad och Cellmellanrum. Om du vill visa cell- och tabellgränser när kanten har värdet 0 väljer du Visa > Visuella hjälpmedel > Tabellkanter.

    Formatera översta raden

    Anger vilken formatering, om sådan används, som ska användas på den översta raden i tabellen. Det finns fyra formateringsalternativ: ingen formatering, fet, kursiv och fet kursiv.

Exportera en tabell

  1. Placera insättningspunkten i någon av tabellcellerna.
  2. Välj Arkiv > Exportera > Tabell.
  3. Ange följande alternativ:

    Avgränsare

    Anger vilket avgränsartecken som ska användas för att separera objekt i den exporterade filen.

    Radbrytningar

    Anger vilket operativsystem som den exporterade filen ska öppnas i: Windows, Macintosh eller UNIX. (Olika operativsystem har olika sätt att ange slutet på en textrad.)

  4. Klicka på Exportera.
  5. Ange ett namn på filen och klicka på Spara.

Markera tabellelement

Du kan markera en hel tabell, rad eller kolumn samtidigt. Du kan också markera en eller flera enskilda celler.

När du rör pekaren över en tabell, rad, kolumn eller cell markerar Dreamweaver alla celler i det urvalet, så att du vet vilka celler som kommer att väljas. Det här är praktiskt när du har tabeller utan kanter, celler som sträcker sig över flera kolumner eller rader, eller kapslade tabeller. Du kan ändra markeringsfärgen i inställningarna.

Obs!

Om du placerar pekaren över en tabellkant och sedan håller ned CTRL (Windows) eller kommandotangenten (Macintosh) så markeras hela tabellstrukturen, det vill säga alla celler i tabellen. Det här är praktiskt när du har kapslade tabeller och vill se strukturen på en av tabellerna.

Markera en hel tabell

Gör något av följande om du vill markera en tabell:

  • Klicka i tabellens övre vänstra hörn om du vill markera tabellen.
  • Klicka i en tabellcell och markera sedan taggen i taggväljaren i dokumentfönstrets nedre, vänstra hörn.
  • Klicka i först i en tabellcell och sedan på tabellrubrikmenyn. Därefter väljer du Välj tabell. Markeringshandtag visas på den markerade tabellens nedre och högra kant.
  • Klicka i en tabellcell och välj sedan Redigera > Tabell > Markera tabell.

Välja enstaka eller flera rader eller kolumner

  1. Placera pekaren så att den pekar på en rads vänstra kant eller på en kolumns övre kant.
  2. När pekaren ändras till en markeringspil klickar du för att välja en rad eller kolumn, eller drar för att markera flera rader eller kolumner.
    Välj en rad

Markera en enstaka kolumn

  1. Klicka i kolumnen.
  2. Klicka på kolumnrubrikmenyn och välj Markera kolumn.

Markera en enstaka cell

  1. Gör något av följande:

    • Klicka i cellen och markera sedan <td>-taggen i taggväljaren i dokumentfönstrets nedre, vänstra hörn.
    • Kontroll-klicka (Windows) eller kommando-klicka (Macintosh) i cellen.

Markera en rad eller ett rektangulärt block med celler

Gör något av följande:
  • Dra från en cell till en annan.

  • Klicka först i en cell och CTRL-klicka (Windows) eller kommando-klicka (Macintosh) sedan i samma cell för att markera den. Sedan skift-klickar du i en annan cell.

Markera ett block med celler

Markera icke-angränsande celler

CTRL-klicka (Windows) eller kommando-klicka (Macintosh) i cellerna, raderna eller kolumnerna som du vill markera.

Om en cell, rad eller kolumn som du CTRL-klickar eller kommando-klickar i inte är markerad redan läggs den till i markeringen. Om den redan är markerad tas den bort från markeringen.

Ändra markeringsfärgen för tabellelement

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).
  2. Välj Markering i kategorilistan till vänster, gör någon av följande ändringar och klicka på OK.
    • Om du vill ändra markeringsfärgen för tabellelement klickar du först på färgrutan Mouse-over. Sedan väljer du en markeringsfärg med färgväljaren (eller anger ett hexadecimalt värde för markeringsfärgen i textrutan).

    • Om du vill aktivera eller inaktivera markering för tabellelement markerar eller avmarkerar du alternativet Visa för Svävning.

    Obs!

    De här alternativen påverkar alla objekt som markeras i programmet när du flyttar pekaren över dem.  

Ange tabellegenskaper

Du kan använda egenskapskontrollen när du vill redigera tabeller.

  1. Markera en tabell.
  2. Ändra önskade alternativ i egenskapskontrollen (Fönster > Egenskaper).
    Tabellegenskaper
    Tabellegenskaper

    Tabell-ID

    Ett ID för tabellen.

    Rader och kolumner

    Antalet rader och kolumner i tabellen.

    B

    Bredden på tabellen i pixlar, eller i procent av webbläsarens fönsterbredd.

    Obs!

    Vanligtvis behöver du inte ange höjden på en tabell.

    Cellfyllnad

    Antalet pixlar mellan cellens innehåll och cellgränserna.

    Cellmellanrum

    Antalet pixlar mellan angränsande tabellceller.

    Justera

    Anger var tabellen visas relativt till andra element i samma stycke, till exempel text eller bilder.

    Vänster justerar tabellen till vänster om andra element (så att texten i samma stycke radbryts runt tabellen till höger). Höger justerar tabellen till höger om andra element (med textbrytning till vänster om den). Center centrerar tabellen (med text som visas ovanför och/eller nedanför tabellen). Standard anger att webbläsaren ska använda sin standardjustering.

    Obs!

    När justeringen är inställd på Standard visas inte övrigt innehåll bredvid tabellen. Om du vill visa en tabell bredvid annat innehåll använder du justeringen Vänster eller Höger.

    Kant

    Anger bredden på tabellens kanter i pixlar.

    Obs!

    Om du inte uttryckligen anger värden för kanter, cellmellanrum och cellfyllnad, visar de flesta webbläsare tabellen med kanter och cellfyllnad som har värdet 1 och cellmellanrum med värdet 2. Om du vill att webbläsarna ska visa tabellen utan fyllnad och mellanrum anger du värdet 0 för Kant, Cellfyllnad och Cellmellanrum. Om du vill visa cell- och tabellgränser när kanten har värdet 0 väljer du Visa > Visuella hjälpmedel > Tabellkanter.

    Klass

    Anger CSS-klassen i tabellen.

    Obs!

    Du kanske måste utöka tabellegenskapskontrollen om du vill se följande alternativ. Det gör du genom att klicka på pilen längst ned till höger.

    Nollställ kolumnbredder och Nollställ radhöjder

    och Nollställ cellhöjder tar bort alla uttryckligen angivna värden för cellhöjd och cellbredd från tabellen.

    Konvertera tabellbredder till bildpunkter

    och Konvertera tabellhöjder till bildpunkter anger bredden eller höjden på varje tabellkolumn som dess aktuella bredd i pixlar (och anger bredden på hela tabellen som dess aktuella bredd i pixlar).

    Konvertera tabellbredder till procent

    och Konvertera tabellhöjder till procent anger bredden eller höjden på varje tabellkolumn som dess aktuella bredd, uttryckt som en procentandel av dokumentfönstrets bredd (anger även bredden på hela tabellen som dess aktuella bredd uttryckt som en procentandel av dokumentfönstrets bredd).

    Om du har angett ett värde i en textruta trycker du på Tabb eller Retur (Windows) eller Retur (Macintosh) för att använda värdet.

Ange egenskaper för celler, rader eller kolumner

Du kan använda egenskapskontrollen när du vill redigera celler och rader i en tabell.

  1. Markera kolumnen eller raden.
  2. Ange följande alternativ i egenskapskontrollen (Fönster > Egenskaper):

    Vågrätt

    Anger den vågräta justeringen av innehållet i en cell, rad eller kolumn. Du kan justera innehållet åt vänster, höger eller mitten av cellerna, eller också kan du ange att webbläsaren ska använda sin standardjustering (vanligtvis åt vänster för vanliga celler och i mitten för rubrikceller).

    Lodr.

    Anger den lodräta justeringen av innehållet i en cell, rad eller kolumn. Du kan justera innehållet mot cellens överkant, mitt, nederkant eller baslinje, eller också kan du ange att webbläsaren ska använda sin standardjustering (vanligtvis i mitten).

    B och H

    Markerade cellers bredd och höjd i pixel eller som en procentandel av hela tabellens bredd eller höjd. Om du vill ange en procentandel skriver du ett procenttecken (%) efter värdet. Om du vill att webbläsaren ska bestämma bredden eller höjden baserat på cellens innehåll och bredden och höjden på övriga kolumner och rader, låter du fältet vara tomt (standardvärdet).

    Som standard väljer en webbläsare en radhöjd och kolumnbredd som är lagom för den bredaste bilden eller den längsta raden i en kolumn. Därför kan en kolumn bli mycket bredare än övriga kolumner i tabellen när du lägger till innehåll i den.

    Obs!

    Du kan ange en höjd som en procentandel av den totala tabellhöjden, men raden kanske inte visas med den höjden i webbläsare.

    Bakgrundsfärg

    Bakgrundsfärgen i en cell, kolumn eller rad vald med färgväljaren.

    Slå samman celler

    En knapp som sammanfogar markerade celler, rader eller kolumner till en cell. Du kan bara sammanfoga celler om de bildar ett rektangulärt eller linjärt block.

    Dela upp cell

    En knapp som delar en cell i två eller flera celler. Du kan bara dela en cell i taget. Den här knappen är avaktiverad om fler än en cell är markerade.

    Ingen radbrytning

    Förhindrar radbrytningar och håller all text i en cell på en enda rad. Om Ingen radbrytning är aktiverad blir cellen bredare för att passa alla data medan du skriver eller klistrar in dem i en cell. (Vanligtvis expanderar celler vågrätt för att passa det längsta ordet eller den bredaste bilden i cellen, och sedan expanderar de lodrätt om det behövs för övrigt innehåll.)

    Rubrik

    Formaterar de markerade cellerna som tabellrubrikceller. Innehållet i tabellrubrikcellerna är fetstilt och centrerat som standard.

    Obs!

    Du kan ange bredder och höjder antingen som pixlar eller som procentandelar, och du kan konvertera från pixlar till procentandelar och tvärtom.

    Obs!

    När du anger egenskaper för en kolumn ändras attributen för td-taggen för varje cell i kolumnen. När du anger vissa egenskaper för en rad ändras emellertid attributen för tr-taggen i stället för att ändra attributen för varje td-tagg på raden. När du använder samma format i alla celler på en rad får du en renare och mer kortfattad HTML-kod om du använder formatet i tr-taggen.

  3. Tryck på tabbtangenten eller Retur (Windows eller Macintosh) för att använda värdet.

Formatera tabeller och celler

Du kan ändra utseende på tabeller genom att ange egenskaper för tabellen och dess celler, eller genom att använda en förinställd design på tabellen. Innan du anger tabell- och cellegenskaper måste du tänka på att företrädesordningen för formatering är celler, rader och tabeller.

Obs!

Om du vill formatera texten inuti en tabellcell använder du samma metod som för att formatera text utanför en tabell.

Ändra formatet för en tabell, rad, cell eller kolumn

  1. Markera en tabell, cell, rad eller kolumn.
  2. I egenskapskontrollen (Fönster > Egenskaper) klickar du på utökningspilen i det nedre högra hörnet och ändrar egenskaper.
  3. Ändra egenskaperna efter behov.

    Klicka på hjälpikonen i egenskapskontrollen om du vill ha mer information om alternativen.

    Obs!

    När du anger egenskaper för en kolumn ändras attributen för td-taggen för varje cell i kolumnen. När du anger vissa egenskaper för en rad ändras emellertid attributen för tr-taggen, i stället för att ändra attributen för varje td-tagg på raden. När du använder samma format i alla celler på en rad får du en renare och mer kortfattad HTML-kod om du använder formatet i tr-taggen.

Lägga till eller redigera tillgänglighetsvärden för en tabell i kodvy

Redigera attribut i koden.
Obs!

För att snabbt hitta taggarna i koden klickar du i tabellen och väljer <table> -taggen i taggväljaren längst ned i dokumentfönstret.

Lägga till eller redigera tillgänglighetsvärden för en tabell i designvy

  • Om du vill redigera tabellrubriken markerar du rubriken och skriver en ny.
    • Om du vill redigera rubrikjusteringen placerar du insättningspunkten i tabellrubriken och högerklickar (Windows) eller kontroll-klickar (Macintosh). Sedan väljer du Redigera kod.

    • Om du vill redigera tabellsammanfattningen markerar du tabellen och högerklickar (Windows) eller kontroll-klickar (Macintosh). Sedan väljer du Redigera kod.

Ändra storlek på tabeller, kolumner och rader

Ändra storlek på tabeller

Du kan ändra storlek på en hel tabell och på enskilda rader och kolumner. När du ändrar storlek på en hel tabell ändras storleken proportionellt på alla celler i tabellen. Om tabellens celler har uttryckligen angivna bredder och höjder, ändras den visuella storleken på cellerna i dokumentfönstret när du ändrar storlek på tabellen, men cellernas angivna bredder och höjder ändras inte.

Du kan ändra storlek på en tabell genom att dra i något av markeringshandtagen. Tabellbredden och en tabellrubrikmeny visas högst upp eller längst ned i tabellen när den har markerats, eller när insättningspunkten finns inuti tabellen.

Ibland motsvarar inte de kolumnbredder som har angetts i HTML-koden de synliga bredderna på bildskärmen. När det händer kan du göra så att bredderna överensstämmer. Tabell- och kolumnbredder och rubrikmenyer visas i Dreamweaver för att hjälpa dig att utforma tabeller. Du kan aktivera och inaktivera bredderna och menyerna när du vill.

Ändra storlek på kolumner och rader

Du kan ändra bredden på en kolumn eller höjden på en rad i egenskapskontrollen eller genom att dra kolumnens eller radens kanter. Om du har problem med att ändra storlek kan du radera kolumnbredderna och radhöjderna och börja om från början.

Obs!

Du kan även ändra bredden och höjden på celler direkt i HTML-koden med hjälp av kodvyn.

Kolumnbredder och kolumnrubrikmenyer visas högst upp eller längst ned i kolumner när tabellen är markerad eller insättningspunkten finns inuti tabellen. Du kan aktivera eller avaktivera kolumnrubrikmenyerna när du vill.

Ändra storlek på en tabell

Markera tabellen. Om du arbetar i Live-vyn visas Elementvisning när du markerar tabellen. Klicka på ikonen med tre streck om du vill starta tabellformateringsläget.

  • Om du vill ändra storlek på tabellen vågrätt drar du i markeringshandtaget på högersidan.

  • Om du vill ändra storlek på tabellen lodrätt drar du i markeringshandtaget i nederkanten.

  • Om du vill ändra storlek på tabellen åt båda hållen drar du i markeringshandtaget i det nedre högra hörnet.

Tryck på Esc eller klicka utanför tabellen om du vill avsluta tabellformateringsläget i Live-vyn. Med alternativen på menyn Redigera > Tabell kan du ändra tabellen ytterligare.

Obs! Vilka alternativ som visas på menyn Redigera > Tabell beror på om du har markerat hela tabellen eller en enda cell. I Live-vyn visas ”table” när hela tabellen är markerad och ”td” när en enskild cell är markerad. Klicka på tabellens kant om du vill växla från en cellformatering till tabellformateringsläget.

Ändra en kolumns bredd och behålla den totala tabellbredden

  1. Dra den högra kanten på den kolumn du vill ändra i designvyn.

    Bredden på den angränsande kolumnen ändras också. Du ändrar alltså egentligen två kolumner. Du ser hur kolumnerna justeras, men den totala tabellbredden ändras inte.

    Ändra kolumnens bredd med bibehållen tabellbredd

    Obs!

    Hela tabellens bredd ändras i tabeller med procentuella bredder (inte pixlar) om du drar den högra kanten på kolumnen längst till höger, och alla kolumnerna blir proportionellt bredare eller smalare.

Ändra en kolumns bredd och behåll storleken på de övriga kolumnerna

  1. Håll ned Skift och dra kolumnens kant i designvyn.

    Bredden på en kolumn ändras. Du ser hur kolumnerna justeras, och den totala tabellbredden ändras för att passa kolumnen som du ändrar storlek på.

    Ändra en kolumns bredd utan att ändra övriga kolumners bredd

Ändra en rads höjd visuellt

Dra den nedre kanten på raden.

Göra så att kolumnbredder i kod överensstämmer med visuella bredder

  1. Klicka i en cell.
  2. Klicka på tabellrubrikmenyn och välj Konsekventa bredder.

    Bredden som anges i koden återställs så att den överensstämmer med den visuella bredden.

Nollställa all bredder eller höjder i en tabell

  1. Markera tabellen.
  2. Gör något av följande:
    • Välj Redigera > Tabell > Nollställ cellbredder eller Redigera > Tabell > Nollställ cellhöjder.

    • Klicka på knappen Nollställ cellhöjder eller Nollställ kolumnbredder i egenskapskontrollen (Fönster > Egenskaper).

    • Klicka på tabellrubrikmenyn och välj Nollställ alla höjder eller Radera alla bredder.

Nollställa en kolumns angivna bredd

Klicka i kolumnen, klicka i kolumnrubrikmenyn och välj Nollställ kolumnbredd.

Aktivera och avaktivera tabell- och kolumnbredder och -menyer i designvyn

Välj Visa > Designvyalternativ > Visuella hjälpmedel > Tabellbredder.

Lägga till och ta bort rader och kolumner

Om du vill lägga till och ta bort rader och kolumner använder du kommandot Ändra > Tabell eller kolumnrubrikmenyn.

Obs!

Om du trycker på Tabbtangenten i den sista cellen i en tabell läggs en ny rad till automatiskt i tabellen.

Lägga till en rad eller kolumn

Klicka i en cell och gör något av följande:
  • Välj Redigera > Tabell > Infoga rad eller Redigera > Tabell > Infoga kolumn.

    En rad visas ovanför insättningspunkten eller en kolumn visas till vänster om insättningspunkten.

  • Klicka på kolumnrubrikmenyn och välj sedan Infoga kolumn till vänster eller Infoga kolumn till höger.

     

Lägga till flera rader eller kolumner

  1. Klicka i en cell.
  2. Välj Redigera > Tabell > Infoga rader eller kolumner och fyll i dialogrutan. Sedan klickar du på OK.

    Infoga

    Anger om rader eller kolumner ska infogas.

    Antal rader och Antal kolumner

    Antalet rader eller kolumner som ska infogas.

    Plats

    Anger om de nya raderna eller kolumnerna ska visas före eller efter den markerade cellens rad eller kolumn.

Ta bort en rad eller en kolumn

Gör något av följande:
  • Klicka i en cell på raden eller i kolumnen som du vill ta bort och välj sedan Redigera > Tabell > Ta bort rad eller Redigera > Tabell > Ta bort kolumn.

  • Markera en hel rad eller kolumn och tryck sedan på Delete.

  • Gör något av följande i egenskapskontrollen (Fönster > Egenskaper):
    • Om du vill lägga till eller ta bort rader ökar eller minskar du värdet för Rader.
    • Om du vill lägga till eller ta bort kolumner ökar eller minskar du värdet för Kolumner.
Obs!

Dreamweaver ger dig ingen varning om du tar bort rader eller kolumner som innehåller data.

Dela och slå samman celler

Använd egenskapskontrollen eller alternativen på undermenyn Redigera > Tabell om du vill dela eller slå samman celler.

Slå samman två eller flera celler i en tabell

  1. Markera cellerna i en obruten rad och i form av en rektangel.

    På följande bild är markeringen en rektangel med celler, och cellerna kan alltså slås samman.

    Celler kan slås samman i en rektangel med celler

    På följande bild är markeringen inte en rektangel med celler, och cellerna kan alltså inte slås samman.

    Celler kan inte slås samman om markeringen inte är en rektangel

  2. Gör något av följande:
    • Välj Redigera > Tabell > Slå samman celler.

    • Klicka på Slå samman celler i den utökade HTML-egenskapskontrollen (Fönster > Egenskaper).

    Obs!

    Om du inte kan se knappen klickar du på utökningspilen i det nedre högra hörnet i egenskapskontrollen så visas alla alternativ.

    Innehållet i de enskilda cellerna placeras i den sammanslagna cellen. Den första cellens egenskaper används på den sammanslagna cellen.

Dela en cell

  1. Klicka i cellen och gör något av följande:
    • Välj Redigera > Tabell > Dela cell.

    • Klicka på Dela upp cell i den utökade HTML-egenskapskontrollen (Fönster > Egenskaper).

    Obs!

    Om du inte kan se knappen klickar du på utökningspilen i det nedre högra hörnet i egenskapskontrollen så visas alla alternativ.

  2. I dialogrutan Dela cell anger du hur cellen ska delas:

    Dela upp cell i

    Anger om du ska dela cellen i rader eller kolumner.

    Antal rader/antal kolumner

    Anger hur många rader eller kolumner du ska dela cellen i.

Öka eller minska antalet rader eller kolumner som en cell sträcker sig över

Gör något av följande:
  • Välj Redigera > Tabell > Öka radutvidgning eller Redigera > Tabell > Öka kolumnutvidgning.

  • Välj Redigera > Tabell > Minska radutvidgning eller Redigera > Tabell > Minska kolumnutvidgning.

Kopiera, klistra in och ta bort celler

Du kan kopiera, klistra in och ta bort en enskild tabellcell eller flera celler åt gången, och behålla cellens formatering.

Du kan klistra in celler vid insättningspunkten eller istället för en markering i en befintlig tabell. Om du vill klistra in flera tabellceller måste innehållet i Urklipp överensstämma med tabellstrukturen eller markeringen i den tabell som cellerna ska klistras in i.

Klippa ut eller kopiera tabellceller

  1. Markera en eller flera celler i en obruten rad och i form av en rektangel.

    På följande bild är markeringen en rektangel med celler, och cellerna kan alltså klippas ut eller kopieras.

    Celler kan klippas ut eller kopieras i en rektangel med celler

    På följande bild är markeringen inte en rektangel, så cellerna kan inte klippas ut eller kopieras.

    Celler kan inte klippas ut eller kopieras om markeringen inte är en rektangel

  2. Välj Redigera > Klipp ut eller Redigera > Kopiera.
    Obs!

    Om du markerar en hel rad eller kolumn och väljer Redigera > Klipp ut tas hela raden eller kolumnen bort från tabellen (och inte bara cellinnehållet).

Klistra in tabellceller

  1. Markera vart du vill klistra in cellerna:
    • Om du vill byta ut befintliga celler mot cellerna som du klistrar in markerar du en uppsättning befintliga celler med samma layout som cellerna i Urklipp. (Om du till exempel har kopierat eller klippt ut ett block med 3 × 2 celler kan du markera ett annat block med 3 × 2 celler som du byter ut genom att klistra in.)

    • Om du vill klistra in en hel rad med celler ovanför en viss cell klickar du i den cellen.

    • Om du vill klistra in en hel kolumn med celler till vänster om en viss cell klickar du i den cellen.

    Obs!

    Om du inte har en hel rad eller kolumn med celler i Urklipp och du klickar i en cell och klistrar in cellerna från Urklipp, kan cellen som du klickade i och dess angränsande celler (beroende på cellens placering i tabellen) bytas ut mot cellerna som du klistrar in.

    • Om du vill skapa en ny tabell med de inklistrade cellerna placerar du insättningspunkten utanför tabellen.
  2. Välj Redigera > Klistra in.

    Om du klistrar in hela rader eller kolumner i en befintlig tabell läggs de till i tabellen. Om du klistrar in en enskild cell byts innehållet i den markerade cellen ut. Om du klistrar in utanför en tabell används raderna, kolumnerna eller cellerna för att definiera en ny tabell.

Ta bort cellinnehåll men låt cellerna vara intakta

  1. Markera en eller flera celler.
    Obs!

    Se till att markeringen inte består av enbart hela rader eller kolumner.

  2. Tryck på Delete.

    Obs!

    Om du enbart har markerat hela rader eller kolumner tas hela raderna eller kolumnerna, och inte bara deras innehåll, bort från tabellen när du väljer Redigera > Rensa eller trycker på Delete.

Ta bort rader eller kolumner som innehåller sammanfogade celler

  1. Markera raden eller kolumnen.
  2. Välj Redigera > Tabell > Ta bort rad eller Redigera > Tabell > Ta bort kolumn.

Kapsla tabeller

En kapslad tabell är en tabell inuti en cell i en annan tabell. Du kan formatera en kapslad tabell som en vanlig tabell, men dess bredd begränsas av bredden på cellen som den visas i.

  1. Klicka i en cell i den befintliga tabellen.
  2. Välj Infoga > Tabell, ange alternativ för Infoga tabell och klicka på OK.

Sortera tabeller

Du kan sortera raderna i en tabell baserat på innehållet i en kolumn. Du kan också göra en mer komplicerad tabellsortering baserat på innehållet i två kolumner.

Det går inte att sortera tabeller som innehåller colspan- eller rowspan-attribut, d.v.s. tabeller som innehåller sammanfogade celler.

  1. Markera tabellen eller klicka i en cell.
  2. Välj Redigera > Tabell > Sortera tabell, ange alternativen i dialogrutan och klicka på OK.

    Sortera efter

    Anger vilken kolumns värden som ska användas för att sortera tabellens rader.

    Ordning

    Anger om kolumnen ska sorteras alfabetiskt eller numeriskt, och om den ska sorteras stigande (A till Ö, låga tal till höga tal) eller fallande.

    När innehållet i en kolumn är siffror väljer du Numeriskt. Om alfabetisk sortering används på en lista med en- eller tvåsiffriga tal sorteras de som om de var ord (vilket resulterar i en sorteringsordning som 1, 10, 2, 20, 3, 30) istället för sorteras som om de var siffror (vilket resulterar i en sorteringsordning som 1, 2, 3, 10, 20, 30).

    Sedan efter/Ordning

    Anger sorteringsordningen för en sekundär sortering på en annan kolumn. Ange kolumnen för den sekundära sorteringen på snabbmenyn Sedan efter, och den sekundära sorteringsordningen på snabbmenyerna Ordning.

    Sortering inkluderar första raden

    Anger att den första raden i tabellen ska inkluderas i sorteringen. Välj inte det här alternativet om den första raden är en rubrik som inte ska flyttas.

    Sortera tabellhuvudrader

    Anger att alla rader i tabellens thead-sektion (om det finns en sådan) ska sorteras med samma villkor som själva tabellraderna. (Observera att thead-raderna blir kvar i samma thead-avsnitt och visas längst upp i tabellen även efter sortering.) Mer information om thead-taggen finns i referenspanelen (välj Hjälp > Referens).

    Sortera tabellfotsrader

    Anger att alla rader i tabellens tfoot-sektion (om det finns en sådan) ska sorteras med samma villkor som själva tabellraderna. (Observera att tfoot-raderna blir kvar i samma tfoot-avsnitt och visas längst ned i tabellen även efter sortering.) Mer information om tfoot-taggen finns i referenspanelen (välj Hjälp > Referens).

    Efter sorteringen behåller raderna sina färger

    Anger att tabellens radattribut (till exempel färg) ska fortsätta vara kopplade till samma innehåll efter sorteringen. Om tabellraderna har formaterats med två omväxlande färger ska du inte välja det här alternativet. På så sätt ser du till att den sorterade tabellen fortfarande har olika färger på varannan rad. Om radattributen är specifika för innehållet på varje rad väljer du det här alternativet. På så sätt ser du till att attributen även i fortsättningen förblir kopplade till rätt rader i den sorterade tabellen.

Få hjälp snabbare och enklare

Ny användare?