Ik krijg op PHP pagina in tabel geen vaste breedte van kolom ongeacht inhoud cel..

Status
Niet open voor verdere reacties.
R

richard5000

Gebruiker
Lid geworden
24 mrt 2012
Berichten
161
Ik krijg geen vaste breedte van een kolom erin ongeacht de inhoud van de cel, hij past de breedte van de kolom iedere keer zelf aan op inhoud van de cel en dit wil ik niet, de kolom breedte moet vast staan ongeacht inhoud cel, dan moet de inhoud die buiten de cel komt wegvallen..?

Ik heb nu aangegeven dat de td width=10, maar als ik de inhoud cel groter maak past hij hem zelf automatisch aan.

Weet iemand hoe ik dit in onderstaand PHP script voor elkaar krijg..?

Thanks!

PHP: 
<body>
<div id="table" style="position:absolute; overflow:hidden; left:50px; top:188px; width:556px; height:57px; z-index:0">
<table>
		<td width=10 bgcolor="#FF0000">
        <div align="center" ><font color="#FFFFFF" <B>HILdfdfdfdf</B></font></div>
        </td>
 
        <td width=130>
        </td>
		
		<td width=13>
        </td>
                
        <td width=130 bgcolor="#0000FF">
		<div align="center"><font color="#FFFFFF" <B>POW</B></font></div>
                    
        <td width=130>
        </td>

		<tr>
		<tr>

        <td bgcolor="#FF0000">
            <div align="center"><font color="#FFFFFF" <B>Nr.</B></font></div>
            </td>
 
        <td bgcolor="#FF0000">
            <div align="center"><font color="#FFFFFF" <B>Woon</B></font></div>
            </td>                
        
		<td width=31>
            </td>
                
        <td width=13 bgcolor="#0000FF">
            <div align="center"><font color="#FFFFFF" ><B>Nr.</B></font></div>
            </td>
            
        <td width=13 bgcolor="#0000FF">
            <div align="center"><font color="#FFFFFF" class="ws12"><B>Woonplaats2</B></font></div>
            </div>
            </td>
</tr>
</table>
</body>
 
Eerst wat opmerkingen :)

1) Hier staat geen regel PHP in, het is HTML met wat inline CSS.
2) De font tag is ruim tien jaar geleden verouderd verklaard, niet meer gebruiken dus. (waar blijven mensen toch steeds leren dat ze dat ding moeten gebruiken?)
3) Je moet bij het schrijven van HTML goed opletten dat je alle tags volledig schrijft en goed afsluit, je eerste font tag mist bijvoorbeeld een >.
4) <td>'s moeten altijd in een <tr> staan

Hier staat een voorbeeldje van hoe het beter zou kunnen. Ik heb daarbij twee tabellen gebruikt, wat het eigenlijk lijken te zijn, en die naast elkaar gezet. Dat maakt de HTML ook des te simpeler en overzichtelijker. Alles wat met het uiterlijk te maken heeft is uit de HTML gesloopt en staat nu waar het hoort, in de CSS. De eerste regel lijkt een kop te zijn voor de kolom die er onder komt dus die heb ik tussen <thead><tr><th></th></tr></thead> gezet.

Een aantal opmerkingen over de CSS van table:
table-layout:fixed; zorgt er voor dat de cellen niet automatisch van grote veranderen.
white-space:nowrap; Voorkomt dat tekst die te lang is over meerdere regels wordt uitgesmeerd
width:130px; geeft iedere tabel een breedte van 130px
float:left; Zorgt ervoor dat de twee tabellen naast elkaar komen te staan.

En de CSS van td:
overflow:hidden; verbergt tekst/afbeeldingen die niet meer in hun container passen.
width:50%; maakt alle cellen half zo breed als de tabel waar ze in staan.

De rest zou redelijk zichzelf moeten wijzen.

klaaspeter zei:
Volgen mijn moet het zo zijn:
Code: 
style="width:10;"
Klik om te vergroten...
Als je style="width:;" gebruikt moet je volgens mij altijd een eenheid opgeven (px, em of %)
 
Laatst bewerkt:
Naarling zei:
Als je style="width:;" gebruikt moet je volgens mij altijd een eenheid opgeven (px, em of %)
Klik om te vergroten...

Volgens mij is het standaard px. Daarnaast is het zelf beter om css te gebruiken.

En de gehele tabel opnieuw te maken volgens de standaarden met daarin een head enzo...
 
Op de eerste plaats helemaal top wat bertreft de reacties, ga er gelijk induiken en laat zo spoedig weten hoe ik ermee gevaren ben en wat ik ben tegen gekomen, ben nog niet zo lang hier mee bezig, maar vind het super leuk en waardeer het zeer dat als je zelf vast zit er andere zijn die je weer op weg helpen, top..!

Groet,
Richard
 
@Naarling
Goedemorgen,

Heb even naar je link gekeken en ben er zelf ook mee aan het stoeien gegaan, heb alles zelfs in een PHP file gekregen (daar gaat het om...), het enige verschil is dat ik in mijn voorbeeld niet echt twee tabellen heb, maar eerst een "soort"tabel met 4 kolommen, waarvan de 1e met tekst en kleur rood, 2e zonder tekst en kleur, 3e met tekst en kleur blauw en 4e zonder tekst en kleur. Daaronder los van het voorafgaand een 2e soort "tabel" met ook 4 kolommen en dan in de 1e en 2e tekst en kleur rood en in de 3e en 4e kolom tekst en kleur blauw.

De bedoeling is dan dat de informatie uit de database weergegeven wordt onder de 2e soort "tabel" en is er een zoekfunctie alleen op de eerste twee kolommen.

Dit alles in een PHP file en ben nu bezig om de zaken los te maken in bv 2 PHP files, een met de CSS en de soort "tabellen" en een met daarin de zoekfunctie omschreven.

Wat ik eigenlijk wil is dus de 1e soort "tabel" los van de 2e soort "tabel" onder elkaar kunnen weergeven en los van elkaar de positie (hoogte, breedte en ruimte links en rechts etc.) kunnen bepalen.

Dus nog even stoeien met jouw informatie om de instellingen in de CSS los van elkaar te krijgen en onder elkaar, leuk project..

Thanks!
 
richard5000 zei:
Ik zet dit toch echt in een PHP file....
Klik om te vergroten...
Maar de code die je gaf is allemaal HTML, niets in je eerste post had met php te maken.

Overigens, als het niet echt tabellen zijn waar je mee werkt is het wellicht handiger om ook geen tabellen in je HTML te gebruiken. Maar goed, ik weet niet met welke gegevens je werkt.
 
Ik zet het in een PHP file en gebruik voor de gegevens eronder de info uit mijn sql database 4 kolommen, met een search functie, maar wil zelf aparte soort koppen erboven kunnen maken los van tabel inhoud van mijn sql.

Groet,
Rich
 
Ik leg even uit hoe php werkt (op jou site).

php code (dus tussen de <? ?>) wordt door de server verwerkt.

Dus als iemand jou site wil openen wordt dat naar de server gestuurd. die vind jou php-file en gaat die doorlezen. Dan komt hij een stukje php tegen dat hij gaat verwerken.

Hij maakt dus verbinding met de database, zoekt de gevraagde gegevens op en verwerkt die in je code. (hij maakt dus die HTML-tabel met gegevens)

Als de server klaar is steurt hij de pagina met de gegevens er in naar de client. deze ontvangt de pagina in de browser, met de hele tabel. Vervolgens komt het javascript aan de beurt.

jou javascript onthoud de hele tabel, maar laat alleen de gegevens zien die aan de zoekopdracht voldoen.

Het hele zoek/filter gedoe zit bij jou dus in het javascript.
Het stukje code in je eerste bericht bevat geen php tags en is dus ook geen php script.


Ik hoop dat je mijn uitleg een beetje begrijpt.
 
Laatst bewerkt:
@klimmer
Bedankt voor de info, ik ben een leek en tracht met lezen en leren op het net en zaken te vragen op forums mijn kennis te krijgen (geen geld voor een cursus ivm WW) en heb naast het solliciteren wel de tijd om achter de PC te zitten.

Ik had begrepen dat het beter is om een website te bouwen met pagina's in PHP, zodat het door de PHP pagina's overzichtelijk blijft omtrent de files op de computer c.q server en dat het bouwen in HTML een beetje uit de tijd is, maar wellicht heb ik het mis.

Heb wel een webprogramma puur HTML (webpage maker) waar ik met plaatjes etc simpel een website bouw, maar wil het graag ook leren op de wijze van PHP.

Kwam in de knoei te zitten doordat ik een database met gegevens heb staan op mijn NAS en deze met een zoekfunctie op een webpagina direct zichtbaar wilde maken, dit kan het programa alleen met iframes en heb begrepen dat dit niet echt goed is voor zoekmachines etc. Ben toen mede door hulp op deze website verder gekomen en heb nu een PHP pagina met daarin HTML waar ik een tabel vanuit mijn NAS SQL direct kan laten zien met daarboven een search functie. Deze filtert de rows dmv submit en laat de selectie zien en gaat bij reset weer terug naar de beginpagina (hele tabel).

Nu wilde ik een soort aparte headers maken voor boven op de tabel die ik apart van elkaar kan wijzigen in postitie etc. en daarboven staat het searchveld die ik ook wil wijzigen in positie los van elkaar, maar als ik dit in een file zet, wijzigt hij bij bepaalde codes alle onderdelen en niet los van elkaar, dit ben ik aan het uitzoeken om alles los van elkaar te kunnen wijzigen, verplaasten etc.

Ben wel erg blij met alle input in deze topic en op deze site, want daar kom ik dan met wat uitproberen weer verder mee en tracht ik het ook te volgen wat men bedoelt zodat ik het ook begrijp.

Groet,
Rich
 
Laatst bewerkt:
@Naarling
Heb nu een tijdje lopen stoeien met de wijze om het in een CSS neer te zetten, ben gekomen met het script om er een tabel van te maken, maar nu moet ik de 3e en 4e kolom van achtergrond kleur veranderen in rood en ook de header erboven..?

Heb er zelf een blanco <th> tussen gezet om straks mij tabel goed uit te laten komen eronder.

heb ergens gelezen dat je ook bij de cellen van de tabel apart kan aangeven wat de achtergrondkleur is, maar ik weet niet goed hoe dit gaat, heb al zaken geprobeerd, maar lukt niet helemaal, weet iemand hoe dit in het onderstaand script aan te passen is, hoe bijvoorbeeld met een aparte th class.. of een aparte td class...?

Hieronder mijn script tot nu toe:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Lange tekst die niet in een cel</title>
<style type="text/css">
table
{
    table-layout:fixed;
    white-space:nowrap;
    width:350px;
    float:left;
    margin-left:0px;
    margin-top:10px;
    border-spacing: 5px 5px;
 
}
th,td
{
    width:25%;
    overflow:hidden;
    color:white;
    text-align:center;
}
td
{
    font-weight:bold;
}
 
.blauw th,
.blauw td
{
    background-color:blue;
}
     
</style>
</head>
 
<body>
 
<table class="blauw">
    <thead>
    <tr>
        <th>Lange tekst die niet in een cel past</th>
        <th></th>
        <th> Dit is ook een lange tekst</th>
        <th></th>
        
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tekst 1</td>
        <td>Tekst 2</td>
        <td>Tekst 3</td>
        <td>Tekst 4</td>  
    </tr>
    </tbody>
</table>
  
</body>
 
</html>
 
Laatst bewerkt:
Een class toevoegen is eigenlijk heel simpel.
<td>Tekst 1</td>
Wordt dan
<td class="klasse">Tekst 1</td>

In je CSS schrijf je dan.
td.klasse{
background:green;/*of een andere kleur natuurlijk*/
}

Je kunt aan ieder element zoveel klassen toeschrijven als je wilt. (er zou wel een limiet kunnen zijn maar die ligt in elk geval veel lager dan de praktische limiet.
 
@Naarling
Thanks ga het na het eten gelijk proberen, dus als ik een andere wil toevoegen noem ik dit gewoon:

<td>Tekst 2</td>
Wordt dan
<td class="klasse2">Tekst 2</td>

In CSS:
td.klasse2{
background:red;
}

Etc, etc.

En als ik een lege cel wil hebben, heb ik dit dan goed gedaan om er <th></th> tussen te zetten en daaronder weer gewoon vier kolommen (voor de tabel uit SQL)?

Groet,
Rich
 
richard5000 zei:
En als ik een lege cel wil hebben, heb ik dit dan goed gedaan om er <th></th> tussen te zetten en daaronder weer gewoon vier kolommen (voor de tabel uit SQL)?
Klik om te vergroten...
Dat zou ik je niet kunnen zeggen eerlijk gezegd, ik heb nog erg weinig ervaring met SQL. Qua HTML kan het volgens mij geen kwaad, al moet je er wel op letten dat je met je CSS niet per ongeluk lege cellen in gaat kleuren waar dat niet de bedoeling is.
 
Ben nog even aan het stoeien geweest en e.e.a. is gelukt, maar zit nog met een klein dingetje, namelijk:

Ik zou graag een extra ruimte willen hebben tussen de 2e en 3e kolom in die ik zelf kan aangeven hoe breed hij moet zijn.

Mijn SQL eronder plaatsen lukt mij zelf wel, maar ik moet eerst de soort headers goed hebben.

Weet iemand hoe ik in onderstaand script die ruimte krijg, weet niet of de manier van <th></th> en <td></td> nu wel goed is en met <td></td> kan ik hem niet apart instellen als het gaat om de breedte.

Hoor het graag.

Groet,
Richard
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Lange tekst die niet in een cel</title>
<style type="text/css">
table
{
    table-layout:fixed;
    white-space:nowrap;
    width:350px;
    float:left;
    margin-left:0px;
    margin-top:10px;
    border-spacing: 5px 5px;
}
th,td
{
    width:25%;
    overflow:hidden;
    color:black;
    text-align:center;
}
th,td
{
    font-weight:bold;
}
td.klasse1
{
	color:white; background-color:blue;
}     
td.klasse2
{
	color:white; background-color:red;
}
th.klasse1
{
	color:white; background-color:blue;
}
th.klasse2
{
	color:white; background-color:red;
}
</style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th class="klasse1">Lange tekst die niet in een cel past</th>
        <th></th>
        <th></th>
        <th class="klasse2"> Dit is ook een lange tekst</th>
        <th></th>
        
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="klasse1">Tekst 1</td>
        <td class="klasse1">Tekst 2</td>
        <td class="klasse2">Tekst 3</td>
        <td class="klasse2">Tekst 4</td>  
    </tr>
    </tbody>
</table>
  
</body>
 
</html>
 
Laatst bewerkt:
Hm, dat lijkt me lastig worden, je zou natuurlijk een vijfde kolom, met witte achtergrond, tussen kunnen voegen maar dat is natuurlijk niet echt een mooie oplossing. Wat is er mis mee om twee losse tabellen te gebruiken?
 
Naarling zei:
Hm, dat lijkt me lastig worden, je zou natuurlijk een vijfde kolom, met witte achtergrond, tussen kunnen voegen maar dat is natuurlijk niet echt een mooie oplossing. Wat is er mis mee om twee losse tabellen te gebruiken?
Klik om te vergroten...

Oke, heb wat zitten stoeien en ben erachter gekomen als ik een extra <th style="width:0px"></th>tussen zet, kan ik de tussen ruimte tussen de 2e en 3e kolom beinvloeden met bv 5px, etc. wel uiteraard rekening houdend met de totale breedte van de tabel.

Ga nu proberen om in plaats van in het document de style CSS in een apart document te plaatsen en dit een naam te geven, zodat ik de diversen files goed uit elkaar kan halen.

Mocht iemand een betere oplossing weten hoor ik dit graag natuurlijk, hieronder nog het script met mijn aapassingen:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Lange tekst die niet in een cel</title>
<style type="text/css">
table
{
    table-layout:fixed;
    white-space:nowrap;
    width:500px;
    float:left;
    margin-left:15px;
    margin-top:20px;
    border-spacing: 5px 5px;
}
th,td
{
    overflow:hidden;
    text-align:center;
    font-weight:bold;
}
td.klasse1
{
	color:white; background-color:blue;
}     
td.klasse2
{
	color:white; background-color:red;
}
th.klasse1
{
	color:white; background-color:blue;
}
th.klasse2
{
	color:white; background-color:red;	
}

</style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th class="klasse1">Lange tekst die niet in een cel past</th>
        <th></th>
        <th style="width:5px"></th>
        <th class="klasse2"> Dit is ook een lange tekst</th>
        <th></th>
        
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="klasse1">Tekst 1</td>
        <td class="klasse1">Tekst 2</td>
        <td></td>
        <td class="klasse2">Tekst 3</td>
        <td class="klasse2">Tekst 4</td>  
    </tr>
    </tbody>
</table>
  
</body>
 
</html>
 
Laatst bewerkt:
Ik kom nog even terug op die reactie na mijn bericht. (sorry voor het late antwoord)

html is niet uit de tijd, het is alleen anders als php

met html kan je pagina's maken die niet veranderen. (dus altijd de zelfde tekst)
met php kan je meer dynamische websites maken, dit oogt dus veel moderner.

met php kan je bijvoorbeeld iets maken dat de naam van elke bezoeker weergeeft.


over die 'cursus', dit hoeft helemaal geen geld te kosten. Er zijn genoeg tutorials enzo te vinden om je hele leven zoet mee te zijn.
En als je ergens niet uitkomst zijn er idd altijd mensen die je wel een schop de goede richting willen geven.

Hoever ben je nou met je zoek script? werkt dat naar wens?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan