Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Wie kann ich genau dieses Bild in HTML nachbauen?

Frage Entwicklung HTML

Mitglied: hewleTT09

hewleTT09 (Level 1) - Jetzt verbinden

15.11.2010 um 15:44 Uhr, 3049 Aufrufe, 4 Kommentare

Guten Tag,

ich hoffe ihr könnt mir bei folgendem Problem weiterhelfen. Ich habe nicht sehr viel Erfahrung mit HTML. Soll aber das folgende Bild 1:1 in HTML nachbauen. ICh hoffe jemand hat eine Idee?
Bis jetzt bin ich soweit gekommen:

<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<p align="center">Stundenplan</p>
<div align="center">
<table border="1" width="54%">
<tr>
<td width="101">
<p align="center">Stunde</td>
<td width="140">
<p align="center">Montag</td>
<td width="116">
<p align="center">Dienstag</td>
<td width="120">
<p align="center">Mittowch</td>
<td width="122">
<p align="center">Donnerstag</td>
<td>
<p align="center">Freitag</td>
</tr>
<tr>
<td width="101">
<p align="center">1.</td>
<td width="140" rowspan="6" colspan="5">
&nbsp;</td>
</tr>
<tr>
<td width="101">
<p align="center">2.</td>
</tr>
<tr>
<td width="101">
<p align="center">3.</td>
</tr>
<tr>
<td width="101">
<p align="center">4.</td>
</tr>
<tr>
<td width="101">
<p align="center">5.</td>
</tr>
<tr>
<td width="101">
<p align="center">6.</td>
</tr>
</table>

</div>

</body>

</html>

Das ist aber glaube ich nicht das Gelbe vom Ei.

Es handelt sich um folgendes Bild:
aaa51e5a99c82a2a986bf2c55d8c2ee6 - Klicke auf das Bild, um es zu vergrößern



Es wäre echt nett wenn Ihr mir behilflich sein könnt.


Gruß
hewlett
Mitglied: laster
15.11.2010 um 16:03 Uhr
Hallo,

01.
<html> 
02.
<head> 
03.
<meta http-equiv="Content-Language" content="de"> 
04.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
05.
<title>New Page 1</title> 
06.
</head> 
07.
<body> 
08.
<p align="center">Stundenplan</p> 
09.
<div align="center"> 
10.
<table border="1" cellspacing=0 cellpadding=3 width="54%"> 
11.
<tr> 
12.
 <td width="90" align="center" bgcolor="lightblue">Stunde</td> 
13.
 <td width="130" align="center" bgcolor="lightblue">Montag</td> 
14.
 <td width="130" align="center" bgcolor="lightblue">Dienstag</td> 
15.
 <td width="130" align="center" bgcolor="lightblue">Mittowch</td> 
16.
 <td width="130" align="center" bgcolor="lightblue">Donnerstag</td> 
17.
 <td width="130" align="center" bgcolor="lightblue">Freitag</td> 
18.
</tr> 
19.
<tr> 
20.
 <td align="center">1.</td> 
21.
 <td colspan="5">&nbsp;</td> 
22.
</tr> 
23.
<tr> 
24.
 <td align="center" bgcolor="lightgrey">2.</td> 
25.
 <td colspan="5" bgcolor="lightgrey">&nbsp;</td> 
26.
</tr> 
27.
<tr> 
28.
 <td align="center">3.</td> 
29.
 <td colspan="5">&nbsp;</td> 
30.
</tr> 
31.
<tr> 
32.
 <td align="center" bgcolor="lightgrey">4.</td> 
33.
 <td colspan="5" bgcolor="lightgrey">&nbsp;</td> 
34.
</tr> 
35.
<tr> 
36.
 <td align="center">5.</td> 
37.
 <td colspan="5">&nbsp;</td> 
38.
</tr> 
39.
<tr> 
40.
 <td align="center" bgcolor="lightgrey">6.</td> 
41.
 <td colspan="5" bgcolor="lightgrey">&nbsp;</td> 
42.
</tr> 
43.
</table> 
44.
 
45.
</div> 
46.
</body> 
47.
</html>
Farben anpassen und mit den Rahmen, musst Du halt mal bisschen probieren (SELFHTML).
vG
LS
Bitte warten ..
Mitglied: Florian.Sauber
15.11.2010 um 20:09 Uhr
Hallo,

besser wäre IMHO eine Umsetzung mit CSS. Ausserdem würde ich zu Tabellenüberschrifen raten. Ist sauberer...

01.
<html> 
02.
<head> 
03.
<style type="text/css"> 
04.
 
05.
table 
06.
{	 
07.
	margin: 11px 10px 10px 8px; 
08.
	border-collapse: collapse; 
09.
	border: 1px solid #000000; 
10.
11.
 
12.
table caption	 
13.
14.
	font-size:0.9em; 
15.
	color: #808080; 
16.
17.
 
18.
table col.stunde 
19.
{  
20.
	border-right: 1px solid #000000; 
21.
}	 
22.
 
23.
thead		 
24.
25.
	color: #000000; 
26.
	background: #00ffff; 
27.
	border-bottom: 1px solid #000000;	 
28.
29.
 
30.
 
31.
table th	 
32.
33.
	padding: 10px 10px 10px 10px; 
34.
	font-size:1em;	 
35.
36.
 
37.
tr.even		 
38.
39.
	background: #c0c0c0; 
40.
41.
 
42.
</style> 
43.
</head> 
44.
 
45.
<body> 
46.
<div id="thetable"> 
47.
 
48.
<table> 
49.
 
50.
<caption>Stundenplan</caption> 
51.
 
52.
<colgroup> 
53.
<col class="stunde" /> 
54.
</colgroup> 
55.
 
56.
<thead> 
57.
	<tr> 
58.
		<th>Stunde</th> 
59.
		<th>Montag</th> 
60.
		<th>Dienstag</th> 
61.
		<th>Mittwoch</th> 
62.
		<th>Donnerstag</th> 
63.
		<th>Freitag</th> 
64.
		<th>Samstag</th> 
65.
	</tr> 
66.
</thead>	 
67.
<tbody> 
68.
	<tr class="odd"> 
69.
		<th>1.</th> 
70.
		<td></td> 
71.
		<td></td> 
72.
		<td></td> 
73.
		<td></td> 
74.
		<td></td> 
75.
		<td></td> 
76.
	</tr> 
77.
	<tr class="even"> 
78.
		<th>2.</th> 
79.
		<td></td> 
80.
		<td></td> 
81.
		<td></td> 
82.
		<td></td> 
83.
		<td></td> 
84.
		<td></td> 
85.
	</tr> 
86.
	<tr class="odd"> 
87.
		<th>3.</th> 
88.
		<td></td> 
89.
		<td></td> 
90.
		<td></td> 
91.
		<td></td> 
92.
		<td></td> 
93.
		<td></td> 
94.
	</tr> 
95.
	<tr class="even"> 
96.
		<th>4.</th> 
97.
		<td></td> 
98.
		<td></td> 
99.
		<td></td> 
100.
		<td></td> 
101.
		<td></td> 
102.
		<td></td> 
103.
	</tr> 
104.
	<tr class="odd"> 
105.
		<th>5.</th> 
106.
		<td></td> 
107.
		<td></td> 
108.
		<td></td> 
109.
		<td></td> 
110.
		<td></td> 
111.
		<td></td> 
112.
	</tr> 
113.
	<tr class="even"> 
114.
		<th>6.</th> 
115.
		<td></td> 
116.
		<td></td> 
117.
		<td></td> 
118.
		<td></td> 
119.
		<td></td> 
120.
		<td></td> 
121.
	</tr> 
122.
</table> 
123.
</div> 
124.
</body> 
125.
</html>
Wenns wirklich Pixelgenau nachgebaut werden muss, weil es z.B. ein Aufgabe so verlangt, muss man weitere Klassen einführen, da die Wochentage weiter eingschoben sind wie die Stunden, wenigstens mein ich mir das einzubilden. Aber ich denke, das obige wird reichen.


Zum Einlesen in das Thema kann ich http://www.thestyleworks.de/basics/tables.shtml empfehlen.

LG Florian
Bitte warten ..
Mitglied: laster
16.11.2010 um 08:29 Uhr
Hallo Florian,

gute Umsetzung un sehr guter Link!

vG
LS
Bitte warten ..
Mitglied: Florian.Sauber
16.11.2010 um 21:46 Uhr
Danke laster,

aber da liesse sich noch einiges verfeinern.
Es wäre gut, wenn man wüsste, was der TO dazu meint...

LG Florian

PS.
Falls Dir der Link zum entsprechenden Tutorial auf der obigen Seite entgangen sein sollte...
http://www.thestyleworks.de/tut-art/layout_table.shtml
Wird Dir noch besser gefallen
Bitte warten ..
Neuester Wissensbeitrag
Humor (lol)

Linkliste für Adventskalender

(3)

Information von nikoatit zum Thema Humor (lol) ...

Ähnliche Inhalte
Webentwicklung
HTML Output in eine txt Datei mit VisualBasicScript (2)

Frage von coca22COCA zum Thema Webentwicklung ...

Windows Netzwerk
gelöst Frage zu den Netzwerkfreigaben mit Bild (8)

Frage von M.Marz zum Thema Windows Netzwerk ...

Python
gelöst Python requests JSON Objekt + Bild versenden (4)

Frage von nullacht15 zum Thema Python ...

PHP
gelöst HTML Dropdownmenü auslesen und in PHP als Variable übergeben (35)

Frage von ITFlori zum Thema PHP ...

Heiß diskutierte Inhalte
Router & Routing
gelöst Ipv4 mieten (22)

Frage von homermg zum Thema Router & Routing ...

Windows Server
DHCP Server switchen (20)

Frage von M.Marz zum Thema Windows Server ...

Exchange Server
gelöst Exchange 2010 Berechtigungen wiederherstellen (20)

Frage von semperf1delis zum Thema Exchange Server ...

Hardware
gelöst Negative Erfahrungen LAN-Karten (19)

Frage von MegaGiga zum Thema Hardware ...