CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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>

Synes godt om

olsensweb.dk Ekspert

08. oktober 2016 - 17:55 #1

burde nok have ligget i
http://www.computerworld.dk/eksperten/spm/programmering/html

her er nogle link der konvaterer dine nuværende html tabeller
http://www.tabletodivconverter.com/
http://divtable.com/converter/
http://www.table2css.com/articles/how-convert-manually-your-html-tables-css

Synes godt om

keysersoze Guru

08. oktober 2016 - 17:59 #2

Hvad er der i vejen med tabeller?

Synes godt om

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 :-)

Synes godt om

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.

Synes godt om

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?)

Synes godt om

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/

Synes godt om

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?

Synes godt om

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.

Synes godt om

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.

Synes godt om

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.

Synes godt om

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.

Synes godt om

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

Synes godt om

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 :)

Synes godt om

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.

Synes godt om

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

Synes godt om

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?

Synes godt om

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 :)

Synes godt om

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

Synes godt om

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?

Synes godt om

olsensweb.dk Ekspert

09. oktober 2016 - 16:45 #20

#19
ja

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Microsoft 365 kurser

Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Se alle Microsoft 365 kurser

Flere spørgsmål fra Andet design kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
En som kan designe et LegoKørekort? Af Chris i Andet design	7	30/10/202404:18	30/10/202414:10
3D foto til stl Af johnnylassen i Andet design	1	31/07/202313:32	31/07/202314:28
InDesign - Af Ajnbnb i Andet design	6	29/07/202209:29	01/08/202209:18
Kan man fremstille numre med en cirkel eller firkant om ? Af Ikke-ekspert i Andet design	6	04/04/202211:38	04/04/202222:11
Logo til kostvejleder Af Buchwald i Andet design	3	18/02/202217:41	20/02/202216:52

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS