Avatar billede Calle5463 Forsker
08. oktober 2016 - 16:09 Der er 19 kommentarer og
1 løsning

Styling af liste med data

Nogen der kan hjælpe mig lidt på vej?

Jeg har pt lavet/fået til at virke (PHP, MySql-db) en tabel med en form i hver række, så jeg kan vise, rette, slette og indsætte data. Men tabeller er noget ... hø.

Så nu vil jeg gerne have stylet det, så data stadig vises tabel-agtigt.

6 kolonner med "Nr", "Navn",  "Titel", "Beskrivelse", "Edit-knap", "Slet-knap"

Nr er et 1-3 cifret tal
Navn og Titel er max 50 char
Beskrivelse er et textarea

Jeg har forløbig fundet ud af  :-)  at lave følgende:

<style>
textarea {
    width: 80%;
    height: 100px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 12px;
    resize: none;
}

textarea:focus {background-color: lightblue;}   
   
input[type=text] {
    width: 80%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 12px;
    outline: none;
}

input[type=text]:focus {background-color: lightblue;}

</style>
Avatar billede keysersoze Guru
08. oktober 2016 - 17:59 #2
Hvad er der i vejen med tabeller?
Avatar billede Calle5463 Forsker
08. oktober 2016 - 18:10 #3
#2, jeg kan ikke give dig en teknisk forklaring, men hver gang jeg nævner, jeg bruger tabeller, får jeg at vide det er no-go.

Jeg kan ellers godt lide at bruge det (fordi jeg nogenlunde kan finde ud af det).

Måske det hænger sammen med at det låser layoutet på sitet til en bestemt form og størrelse - eller noget? Eller det er for nemt :-)
Avatar billede keysersoze Guru
08. oktober 2016 - 18:17 #4
Tabeller er no-go til opsætning af design - det var sådan mange lavede web for måske 15 år siden og det være noget værre rod. Da man fandt ud af hvor stort et rod det var gik en masse ud og udråbte tabeller som værende noget skidt - men mange gjorde også deres udskæld af tabeller til noget værre rod og dermed lidt misforstået. Tabeller er rigtig gode til det de er designet til - nemlig opsætning af tabulerede.
Avatar billede Calle5463 Forsker
08. oktober 2016 - 20:01 #5
#4, lige nu har du overtalt mig til at beholde mine små tabeller for overskuelig visning  data (kan man ikke lægge billeder ind her?)
Avatar billede olsensweb.dk Ekspert
08. oktober 2016 - 20:18 #6
som jeg har skrevet tidligere er forms i tabeller ikke valide, og derfor bør det lavs om, som du vil gøre nu
tabeller er til tabulærer data (som du ville vise det i et regneark), og skal ikke indeholde forms eller andet html, så begynder man at bruge det til design, no go


>(kan man ikke lægge billeder ind her?)
ikke så hvidt jeg ved, lig det på egen server eller en gratis tjeneste og kom med et link
nogle gratis steder (har ikke selv brugt dem)
https://postimage.org/
http://www.freeimagehosting.net/upload.php
https://www.imageupload.co.uk/
Avatar billede keysersoze Guru
09. oktober 2016 - 12:37 #7
Skal ikke afvise at jeg husker forkert - men hvad skulle være problemet med forms og tabeller?
Avatar billede keysersoze Guru
09. oktober 2016 - 12:47 #8
Hvis du tænker at det er fordi tabellerne så bliver brugt til design og ikke til data så er vi vel lidt i en gråzone, hvor det kræver lidt mere viden om det præcise scenarie.
Avatar billede olsensweb.dk Ekspert
09. oktober 2016 - 12:56 #9
#7
spørgeren har noget ligende denne HTML lavet ud fra
http://www.computerworld.dk/eksperten/spm/1013114?k=8234617

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>

        <style type="text/css">

        </style>
       
    </head>
    <body>

    <table>
<tr>
<td width='5%'>ID</td>
<td width='10%'>Sort</td>
<td width='20%'>Hverv</td>
<td width='45%'>Beskrivelse</td>
<td  width='10%'>Edit</td>
<td  width='10%'>Slet</td>
</tr>
<form method='post' action='/test/test.php'>
<tr>
<td><input type='text' name='ID' value='1' style='width: 50px;'></td>
<td><input type='text' name='sortering' value='1' style='width: 50px;'></td>
<td><input type='text' name='tillidshverv' value='1' style='width: 150px;'></td>
<td><textarea name='beskrivelse' style='width: 250px; height: 85px;'>dhkertkhethe ehwehrui sdhwrh4</textarea></td>
<td><input type='submit' name='knap' value='Edit'/></td>
<td><input type='submit' name='knap' value='Slet'/></td>
</tr>
</form>
<form method='post' action='/test/test.php'>
<tr>
<td><input type='text' name='ID' value='3' style='width: 50px;'></td>
<td><input type='text' name='sortering' value='1' style='width: 50px;'></td>
<td><input type='text' name='tillidshverv' value='1' style='width: 150px;'></td>
<td><textarea name='beskrivelse' style='width: 250px; height: 85px;'>dert wew54  435 234 dfs er</textarea></td>
<td><input type='submit' name='knap' value='Edit'/></td>
<td><input type='submit' name='knap' value='Slet'/></td>
</tr>
</form>
<form method='post' action='/test/test.php'>
<tr>
<td><input type='text' name='ID' value='4' style='width: 50px;'></td>
<td><input type='text' name='sortering' value='1' style='width: 50px;'></td>
<td><input type='text' name='tillidshverv' value='1' style='width: 150px;'></td>
<td><textarea name='beskrivelse' style='width: 250px; height: 85px;'>fgdre werw 34 agtwe</textarea></td>
<td><input type='submit' name='knap' value='Edit'/></td>
<td><input type='submit' name='knap' value='Slet'/></td>
</tr>
</form>
</table>
</body>
</html>


ref https://validator.w3.org/
>Error: Start tag form seen in table.
>Error: Element form not allowed as child of element tbody in this context. (Suppressing further errors from this subtree.)

og så er der nogle
>Error: The width attribute on the td element is obsolete. Use CSS instead.
Avatar billede Calle5463 Forsker
09. oktober 2016 - 13:00 #10
Det er vel i bund og grund så ikke et spørgsmål om brug af tabeller, me brug af tabeller med absolutte width?

Desuden er det vel også et spørgsmål om hvad de specifikke sider bruges til og af hvem.
Avatar billede Calle5463 Forsker
09. oktober 2016 - 13:03 #11
Og i øvrigt er der sket flere opdateringer siden mine første indlæg med mine tidlige forsøg på at få "hul igennem" og overhovedet bare få det til at virke med datamanipulationen - layout kommer i min verden længere nede af prioriteringslisten.
Avatar billede olsensweb.dk Ekspert
09. oktober 2016 - 13:03 #12
hvis man har form inde i <tr>

<tr>
<form method='post' action='/test/test.php'>
<td><input type='text' name='ID' value='1' style='width: 50px;'></td>
<td><input type='text' name='sortering' value='1' style='width: 50px;'></td>
<td><input type='text' name='tillidshverv' value='1' style='width: 150px;'></td>
<td><textarea name='beskrivelse' style='width: 250px; height: 85px;'>dhkertkhethe ehwehrui sdhwrh4</textarea></td>
<td><input type='submit' name='knap' value='Edit'/></td>
<td><input type='submit' name='knap' value='Slet'/></td>
</form>
</tr>

fejler den også med sammen fejl som vist i #9
Avatar billede keysersoze Guru
09. oktober 2016 - 13:07 #13
Det er jo "bare" invalid kode og manglende brug af css - det kan vi nok ikke klantre hverken tabel eller form for som sådan men nok mere udvikleren :)
Avatar billede Calle5463 Forsker
09. oktober 2016 - 13:18 #14
- sålænge det gør hvad jeg beder det om, så er det nu sådan det er.
Avatar billede olsensweb.dk Ekspert
09. oktober 2016 - 13:24 #15
#10
>Desuden er det vel også et spørgsmål om hvad de specifikke sider bruges til og af hvem.
ja, men derfor kan man godt følge standarten, det gør også css nemmere, en invalid side skal browseren bruge mere tid på at fortolke, og ikke alle browsere fortolker det ens.

#13, det manglende CSS bekymre jeg mig ikke om, det er hurtig lavet
http://www.computerworld.dk/eksperten/spm/1013114 #4 er bare en rettelse af
http://www.computerworld.dk/eksperten/spm/1013114 #0
Avatar billede Calle5463 Forsker
09. oktober 2016 - 13:36 #16
Men hvis man skal validere siden, så skal man vel bruge hele siden, og ikke kun det php der stoppes ind mellem en hel masse andet program-(skrammel) i wordpress?
Avatar billede keysersoze Guru
09. oktober 2016 - 13:40 #17
#15 Jeg forsøger ikke at negligere pæn og valid kode, jeg havde bare ikke set den markup før :)
Avatar billede olsensweb.dk Ekspert
09. oktober 2016 - 14:05 #18
#16
>Men hvis man skal validere siden, så skal man vel bruge hele siden,
ja,

WP kan du ikke gøre rnoget ved, men det du selv laver, kan/bør du sørger for er valid, så antallet af fejl ikke stiger.

lav en std test skabelon du tester i, og når code stumpen virker kan du smide den over i WP

på nuværende tidspunkt er det ikke nødvendigt at udvikle inden i WP, men mindre du skal anvende WP's variabler, samt selvføgelig når du skal style
Avatar billede Calle5463 Forsker
09. oktober 2016 - 14:43 #19
#18

Når du skriver "virker", går jeg ud fra du mener fejlfri gennem fx.https://validator.w3.org/ og ikke bare at det gør som jeg ønsker?
Avatar billede olsensweb.dk Ekspert
09. oktober 2016 - 16:45 #20
#19
ja
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester