[html] jak poprawnie umiescic formularz w tabeli ?

Post autor: **Sir_Yaro** » 21 lis 2007, 10:16

Witam.
Jestem dosc zielony w html'u wiec bardzo prosze o pomoc bo nie potrafie tego rozwiazac sam.
php generuje mi kod jak ponizej. Jak sie doczytalem jest zly gdyz nie mozna zagniezdzac formularzy w tabelach. Fakt ze sie to wyswietla inaczej w kazdej przegladarce zdecydowanie to potwierdza. :smutny:
Niestety nie potrafie tego poprawic.
Czy potrafilby mi ktos poprawic ten kod tak aby byl poprawny?

Kod: Zaznacz cały

<table style="text-align: left; width: 100%;" border="1"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 30px;">lp</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 125px;">Montażysta</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 125px;">MAC</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 287px;">Adres</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 287px;">Uwagi</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 140px;">Data zlecenia</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 140px;">Data wykonania</td>
      <td style="text-align: center; background-color: rgb(204, 204, 255); width: 75px;"></td>
    </tr>
   <tr><td style="text-align: center; background-color: rgb(204, 204, 255);">4</td>
<td style="text-align: center; background-color: rgb(233, 233, 255); ">Lukasz</td>
<td style="text-align: center; background-color: rgb(233, 233, 255); "><font face="Andale Mono">0014F8FFB5AA</font></td>
<td style="text-align: center; background-color: rgb(233, 233, 255); "></td>
<td style="text-align: center; background-color: rgb(233, 233, 255); "></td>
<td style="text-align: center; background-color: rgb(233, 233, 255); ">2007.11.19</td>
<td style="text-align: center; background-color: rgb(233, 233, 255); ">
<form name="input" action="qadd.php" method="post">
<input type="hidden" name="id" value="24">
<input type="hidden" name="dataw" value="2007.11.20">
<input type="submit" value="Dziś">
</form>
<form name="input" action="qadd.php" method="post">
<input type="hidden" name="id" value="24">
<input type="hidden" name="dataw" value="2007-11-19">
<input type="submit" value="Wczoraj">
</form>
</td>
<td style="text-align: center; background-color: rgb(233, 233, 255); "><a href="delete.php?id=24"><img style="width: 16px; height: 16px;" alt="delete" src="delete.gif"></a> - <a href="edit.php?id=24"><img style="width: 16px; height: 16px;" alt="edit"  src="edit.gif"></a></td>
    </tr>
  </tbody>
</table>

lethal2 · Post autor: **lethal2** » 22 lis 2007, 11:18

Witam
Urodziłem taki oto kod, sprawdź, czy pracuje na IE, o ile oczywiście potrzebujesz (testowałem na Operze i Firefoksie):

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#container {display: table;border: 1px solid black;}
#container div {border: 1px solid black;}
#headers {display: table-row;}
#headers div {text-align: center;background-color: rgb(204, 204, 255);display: table-cell;}
#hd1 {width: 30px;}
#hd2 {width: 125px;}
#hd3 {width: 125px;}
#hd4 {width: 287px;}
#hd5 {width: 287px;}
#hd6 {width: 140px;}
#hd7 {width: 140px;}
#hd8 {width: 75px;}
#content {display: table-row;}
#content div {text-align: center;display: table-cell;}
.cn1 {background-color: rgb(204, 204, 255);}
.cn2, .cn3, .cn4, .cn5, .cn6, .cn7, .cn8 {background-color: rgb(233, 233, 255);}
.cn3 {font-family: Andale Mono;}
img.del, img.edit {width: 16px;height: 16px;}
</style>
</head>
<body>
<div id="container">
	<div id="headers">
		<div id="hd1">lp</div>
		<div id="hd2">Montażysta</div>
		<div id="hd3">MAC</div>
		<div id="hd4">Adres</div>
		<div id="hd5">Uwagi</div>
		<div id="hd6">Data zlecenia</div>
		<div id="hd7">Data wykonania</div>
		<div id="hd8"></div>
	</div>
	<div id="content">
		<div class="cn1">4</div>
		<div class="cn2">Lukasz</div>
		<div class="cn3">0014F8FFB5AA</div>
		<div class="cn4"></div>
		<div class="cn5"></div>
		<div class="cn6">2007.11.19</div>
		<div class="cn7">
			<form name="input" action="qadd.php" method="post">
				<input type="hidden" name="id" value="24" />
				<input type="hidden" name="dataw" value="2007.11.20" />
				<input type="submit" value="Dziś" />
			</form>
			<form name="input" action="qadd.php" method="post">
				<input type="hidden" name="id" value="24" />
				<input type="hidden" name="dataw" value="2007-11-19" />
				<input type="submit" value="Wczoraj" />
			</form>
		</div>
		<div class="cn8">
			<a href="delete.php?id=24"><img class="del" alt="delete" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="edit"  src="edit.gif" /></a>
		</div>
	</div>
</div>
</body>
</html>

Post autor: **Sir_Yaro** » 22 lis 2007, 16:05

dziekuej bardzo. jutro jak bede w pracy dam znac jak to dziala. bo wyglada ciekawie

lethal2 · Post autor: **lethal2** » 22 lis 2007, 19:05

Tak jeszcze patrzę, że w sekcji style damy:

Kod: Zaznacz cały

.content {display: table-row;}
.content div {text-align: center;display: table-cell;}

zamiast:

Kod: Zaznacz cały

#content {display: table-row;}
#content div {text-align: center;display: table-cell;}

a w sekcji body:

Kod: Zaznacz cały

<div class="content">

zamiast:

Kod: Zaznacz cały

<div id="content">

-------------

Przy dodawaniu kolejnych wierszy danych wystarczy dodawać kolejne struktury <div class="content"></div>, które znaczą tyle, co <tr></tr>

Post autor: **Sir_Yaro** » 23 lis 2007, 12:53

w sumie to nie wiele sie zmienilo...
wciaz placze o to samo:
http://validator.w3.org/check?uri=http% ... ne&group=0

gabi · Post autor: **gabi** » 25 lis 2007, 19:37

Sproboj cos takiego

Kod: Zaznacz cały

...
<form >
<div>
       kod formularza
</div>
</form>
.....

Post autor: **Sir_Yaro** » 25 lis 2007, 21:43

tak walsnie kombinuje. tylko ze ja potrzebuje 2 formularzy a nie jednego

a przeciez

Kod: Zaznacz cały

<form >
<form >
<div>
       kod formularza1
       kod formularza2
</div>
</form>
</form>

spowoduje tylko problemy

gabi · Post autor: **gabi** » 25 lis 2007, 22:50

Dlaczego nie zrobisz tak:

Kod: Zaznacz cały

<form>
<div>
....
</div>
</form>
<form>
<div>
...
</div>
</form>

?

maurycy · Post autor: **maurycy** » 26 lis 2007, 10:33

wstaw taki nagłówek:

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
form{ display: compact;}
    #container {display: table; border: 1px solid black;}
    #container div {border: 1px solid black;}
    #headers {display: table-cell;}
    #headers div {text-align: center;background-color: rgb(204, 204, 255);display: table-cell;}
    #hd1 {width: 30px;}
    #hd2 {width: 125px;}
    #hd3 {width: 125px;}
    #hd4 {width: 287px;}
    #hd5 {width: 287px;}
    #hd6 {width: 140px;}
    #hd7 {width: 140px;}
    #hd8 {width: 75px;}
    #content {display: table-cell;}
    #content div {text-align: center;display: table-cell;}
    .cn1 {background-color: rgb(204, 204, 255);}
    .cn2, .cn3, .cn4, .cn5, .cn6, .cn7, .cn8 {background-color: rgb(233, 233, 255);}
    .cn3 {font-family: Andale Mono;}
    img.del, img.edit {width: 16px;height: 16px;}
-->
</style>
</head>

i użyj sposobu który przedstawił gabi bo jest prawidłowy.

pozdrawiam

Maurycy

martinprz · Post autor: **martinprz** » 14 gru 2008, 18:06

Witam wszystkich!

Czytałem aktualnego posta i na jego podsatwie próbowałem rozwiązać podobny problem.

Kod wygląda tak: http://www.sendspace.com/file/c99ho4

Czy mógłby mi ktoś doradzić dlaczego ppowyższy kod nie działa poprawnie?

- tabelka nie jest na środku mimo, że w "container" dałem text-align: center;
- dlaczego mimo, że zdefiniowałem "headers" to komórki (hd ...) są umieszczone pod sobą a nie obok siebie?
- dlaczego mimo, że jest zdefiniowana szerokość komórek nie widać tego?

Proszę o pomoc w rozwiązaniu problemu

Pozdrawiam

el.pescado · Post autor: **el.pescado** » 14 gru 2008, 19:47

- tabelka nie jest na środku mimo, że w "container" dałem text-align: center;

Gdyż text-align określa wyrównywanie tekstu, a taleba tekstem nie jest.

- dlaczego mimo, że zdefiniowałem "headers" to komórki (hd ...) są umieszczone pod sobą a nie obok siebie?

W CSS wpisałeś #heiders (literówka)

Swoją drogą, widzę, że próbujesz zrobić coś dziwnego, mianowicie próbujesz stworzyć tabelkę, nie używając tagu <table>. To, że odchodzi się od tworzenia stron na tabelkach, nie znaczy, że w ogóle tabel nie można tworzyć. Tag <table> służy do wyświetlania danych tabelarycznych, dlatego użycie go w takim kontekście jest słuszne. Szablon strony nie jest daną tabelaryczną, dlatego nie powinno się używać tabel do rozmieszczania elementów na stronie. W całej krucjacie przeciwko tabelom nie chodzi o to, żeby się ich całkowicie pozbyć, tylko, żeby były używane do tego, do czego służą.

martinprz · Post autor: **martinprz** » 14 gru 2008, 21:27

Ale chciałem wykonać podobną tabelę jak była przedstawiona w poście i wykonałem ja wg wskazówek, ale nie wyszła mi ona jak chcę. A przykład na stronie ma takie samo zastosowanie jak mój.

[html] jak poprawnie umiescic formularz w tabeli ?

[html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Odp: [html] jak poprawnie umiescic formularz w tabeli ?

Kto jest online