Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]PROBLEM Z TABELKĄ
Forum PHP.pl > Forum > Przedszkole
@ni@
Cześć. jestem początkująca w kwestii html. czy ktoś mógłby mi pomóc rozwiązać problem z tabelką?
chciałabym aby tytuł tabelki był oddzielony od reszty linią poziomą, natomiast w reszcie tabelki, żeby tych linii nie było. na razie rozwiązałam to za pomocą dwóch tabelek, jedna po drugiej. na podglądzie w edytorze wygląda w porządku, jednak po otworzeniu za pomocą przeglądarki są "małe niedociągnięcia". rozmiary obu ramek nie są takie same.
plej
www.kurshtml.bo.pl
Najlepszy kurs w necie:)
@ni@
jak wpisałam ten adres to wyskoczyła biała strona :/
boro11
Użyj do tego celu CSS, masz tam możliwości stylowania każdego boku osobno.
@ni@
tylko taki mały problem jest, że totalnie nie wiem jak posługiwać się css.. sad.gif
wiem, że trzeba pewnie być totalnym debilem, żeby tego "nie ogarniać", ale najwidoczniej nim jestem.. sad.gif
nie można tego zrobić nie używając css?

a jeśli się nie da inaczej tego zrobić, to czy ktoś byłby tak uprzejmy i napisał kod na przykładową tabelkę z linią oddzielającą tytuł od reszty tabelki a w pozostałej części, żeby nie było linii poziomych?
z góry dziękuję za pomoc
markonix
Pokaż jaki masz już kod. Pokaż też (screen) efekt jaki chcesz osiągnąć.
Wyrażenie tytuł tabelki mi nie kojarzy się z żadnym elementem tabeli w HTML.

Kod
<h2>Tytuł tabeli</h2>
<hr />
<table>
...


plej
http://www.kurshtml.edu.pl/


masz to ten link sryy:)

Masz tu kurs html dla zielonych kurs css:) sam się z tego html'a uczyłem:) fajnie tłumaczone na bank ci pomoże:)
@ni@
to jest początek tabelek


<table align="center" BORDER CELLSPACING=4>
<tr>
<td width="80" align="center" rowspan=2><b>Punkt<br />JZOT</b></td>
<td width="581" align="center" rowspan=2><b>Nazwa obiektu,<br />zakres prac</b></td>
<td align="center" colspan=3><b>Poziomy obsług</td></b>
</tr><tr>
<td width="25"align="center"><b>B</b></td>
<td width="25"align="center"><b>C</b></td>
<td width="25"align="center"><b>P</b></td>
</tr>
</table>
<table rules="cols" ALIGN="center" BORDER CELLSPACING=4>
<tr>
<td width="80" align="center"></td>
<td width="581" align="center"><br /></td>
<td width="29"align="center"></td>
<td width="29"align="center"></td>
<td width="29"align="center"></td>
</tr><tr>
<td width="80" align="center"></td>
<td width="581" align="center"><u>Czynności wstępne</u></td>
<td width="29"align="center"></td>
<td width="29"align="center"></td>
<td width="29"align="center"></td>
</tr><tr>
<td width="80" align="center"></td>
<td width="581">Przygotować do pracy:</td>
<td width="29"align="center"></td>
<td width="29"align="center"></td>
<td width="29"align="center"></td>
</tr>

w tej pierwszej wstawiłam "tytuły kolumn tabelki" a poniżej początek tabelki, w której bym chciała, żeby nie było limii poziomych
markonix
No i wkleiłem i nie mam kresek poziomych pomiędzy kolejnymi wierszami - są tylko pionowe no i kreska kończąca ale to chyba ma być..

Jeśli wklejasz kod to korzystaj z bbcode (html).
@ni@
tak ma być, tylko jak to otwieram za pomocą przeglądarki, to wtedy rozmiary tych dwóch tabelek nie są takie same sad.gif
markonix
Ustal na sztywno szerokość za pomocą width np. 800px dla obu tabel. U mnie działa i wygląda dobrze (ale o kodzie nie można tego powiedzieć).
plej
tu masz o tabelach wszystko: http://www.kurshtml.edu.pl/html/tabele.html
@ni@
wiem, że kod wygląda strasznie.. ale to był jedyny pomysł, jaki mi przyszedł do głowy.
markonix
Pomijając sam pomysł. Np. nie musisz za każdym razem powtarzać szerokości komórek - tabela się dostroi.
No i jeśli to nie jest Twój pojedynczy projekt to CSS się przyda troszkę poduczyć.
@ni@
Cytat(plej @ 22.05.2011, 21:08:40 ) *
tu masz o tabelach wszystko: http://www.kurshtml.edu.pl/html/tabele.html


właśnie z tej strony starałam się dowiedzieć jak zrobić tabelkę, tylko właśnie znalazłam jak zrobić, żeby nie było linii poziomych, ale wtedy po nazwie kolumn też nie ma linii oddzielającej.



Cytat(markonix @ 22.05.2011, 21:12:36 ) *
Pomijając sam pomysł. Np. nie musisz za każdym razem powtarzać szerokości komórek - tabela się dostroi.
No i jeśli to nie jest Twój pojedynczy projekt to CSS się przyda troszkę poduczyć.



niestety, to jest tylko część.. czyli css mnie nie ominie.. sad.gif
wielkie dzięki
plej
poszukaj sobie artykułów na googlach jakiśsmile.gif z czasem się nauczysz:) trenigd czyni mistrza:)
@ni@
wiem, wiem, z czasem się nauczę.. tylko z tym czasem nieco kiepsko. to ma być część mojej pracy magisterskiej i czas tak mi się nico kończy w okolicach 30 czerwca.. sad.gif

wielkie dzięki za pomoc
roobik
cześć
Przygotowałem tak na szybko dwa kody. Może Ci się przyda. Pierwszy taki "skromny", a drugi "nieco lepszy" wink.gif
Celowo napisałem te kody w taki, a nie inny sposób, żebyś widziała o co chodzi w stylach.
TABELKA 1
  1. <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
  2. <title>STRONA TESTOWA</title>
  3. <style type="text/css">
  4. table.glowna {
  5. width: 800px; /*szerokosc*/
  6. border-bottom: 1px solid #c8c8c8; /*ramka dolna*/
  7. }
  8. td.a {
  9. width: 80px;
  10. text-align: center;
  11. }
  12. td.b {
  13. width: 581px;
  14. text-align: center;
  15. }
  16. td.cc {
  17. width:90px;
  18. text-align: center;
  19. }
  20.  
  21. td.c {
  22. width: 29px;
  23. text-align: center;
  24. }
  25.  
  26. </head>
  27.  
  28. <table class="glowna" align=center>
  29. <tr>
  30. <td class="a"><b>Punkt<br>JZOT</b></td>
  31. <td class="b"><b>Nazwa obiektu,<br>zakres prac</b></td>
  32. <td class="cc"><b>Poziomy obsług</b>
  33.  
  34. <table style="width: 90px;">
  35. <tr>
  36. <td class="c"><b>B</b></td>
  37. <td class="c"><b>C</b></td>
  38. <td class="c"><b>P</b></td>
  39. </tr>
  40. </table>
  41.  
  42. </td>
  43. </tr>
  44.  
  45. <table style="width: 800px;" align=center>
  46. <tr>
  47. <td class="a"></td>
  48. <td class="b"><u>Czynności wstępne</u></td>
  49. <td class="c"></td>
  50. <td class="c"></td>
  51. <td class="c"></td>
  52. </tr><tr>
  53. <td class="a"></td>
  54. <td class="b">Przygotować do pracy:</td>
  55. <td class="c"></td>
  56. <td class="c"></td>
  57. <td class="c"></td>
  58. </tr>
  59. </body>
  60. </html>


DRUGA TABELKA
  1. <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
  2. <title>STRONA TESTOWA</title>
  3. <style type="text/css">
  4. table.glowna {
  5. width: 800px; /*szerokosc*/
  6. border-bottom: 1px solid #c8c8c8; /*ramka dolna*/
  7. }
  8. td.a {
  9. width: 80px;
  10. text-align: center;
  11. }
  12. td.b {
  13. width: 581px;
  14. text-align: center;
  15. }
  16. td.cc {
  17. width:90px;
  18. text-align: center;
  19. }
  20.  
  21. td.c {
  22. width: 29px;
  23. text-align: center;
  24. }
  25.  
  26. </head>
  27.  
  28. <TABLE STYLE="BORDER: 1px solid #c8c8c8;" ALIGN=CENTER><TR><TD>
  29. <table class="glowna" align=center>
  30. <tr>
  31. <td class="a"><b>Punkt<br>JZOT</b></td>
  32. <td class="b"><b>Nazwa obiektu,<br>zakres prac</b></td>
  33. <td class="cc"><b>Poziomy obsług</b>
  34.  
  35. <table style="width: 90px;">
  36. <tr>
  37. <td class="c"><b>B</b></td>
  38. <td class="c"><b>C</b></td>
  39. <td class="c"><b>P</b></td>
  40. </tr>
  41. </table>
  42.  
  43. </td>
  44. </tr>
  45.  
  46. <table style="width: 800px; border-bottom: 1px solid #c8c8c8;" align=center>
  47. <tr>
  48. <td style="width: 581px; text-align: center;"><u>Czynności wstępne</u><br>Przygotować do pracy:</td>
  49. </tr>
  50.  
  51.  
  52. <table style="width: 800px;" align=center>
  53. <tr>
  54. <td style="width: 80px; height: 50px; text-align:center; border-bottom: 1px solid #c8c8c8;">1</td>
  55. <td style="width: 581px; height: 50px; text-align:center; border-left: 1px solid #c8c8c8; border-bottom: 1px solid
  56. #c8c8c8;">123</td>
  57. <td style="width: 29px; height: 50px; text-align:center; border-bottom: 1px solid #c8c8c8;">2</td>
  58. <td style="width: 29px; height: 50px; text-align:center; border-left: 1px solid #c8c8c8; border-right: 1px solid
  59. #c8c8c8; border-bottom: 1px solid #c8c8c8;">3</td>
  60. <td style="width: 29px; height: 50px; text-align:center; border-bottom: 1px solid #c8c8c8;">4</td>
  61. </tr>
  62. <tr>
  63. <td style="width: 80px; height: 50px; text-align:center; border-bottom: 1px solid #c8c8c8;">2</td>
  64. <td style="width: 581px; height: 50px; text-align:center; border-left: 1px solid #c8c8c8; border-bottom: 1px solid
  65. #c8c8c8;">567</td>
  66. <td style="width: 29px; height: 50px; text-align:center; border-bottom: 1px solid #c8c8c8;">7</td>
  67. <td style="width: 29px; height: 50px; text-align:center; border-left: 1px solid #c8c8c8; border-right: 1px solid
  68. #c8c8c8; border-bottom: 1px solid #c8c8c8;">8</td>
  69. <td style="width: 29px; height: 50px; text-align:center; border-bottom: 1px solid #c8c8c8;">9</td>
  70. </tr>
  71.  
  72. </TD></TR></TABLE>
  73. </body>
  74. </html>

Jakby co - wal na priv - pomogę smile.gif
@ni@
ślicznie dziękuję
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.