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, 3054 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
Ähnliche Inhalte
Grafikkarten & Monitore
Neue Graifkkarte - kein Bild (10)

Frage von bestelitt zum Thema Grafikkarten & Monitore ...

Grafikkarten & Monitore
PC startet, aber kein Bild (10)

Frage von Linuxguru zum Thema Grafikkarten & Monitore ...

Webentwicklung
gelöst HTML 5 Sterne Bewertung buggt (7)

Frage von Yanmai zum Thema Webentwicklung ...

Heiß diskutierte Inhalte
Switche und Hubs
LAG zwischen Cisco SG300 und Dlink DGS1100 herstellen - wie? (18)

Frage von White-Rabbit2 zum Thema Switche und Hubs ...

Linux
gelöst Boot failed: not a bootable disk (10)

Frage von Fleckmen zum Thema Linux ...

Grafikkarten & Monitore
Neue Graifkkarte - kein Bild (10)

Frage von bestelitt zum Thema Grafikkarten & Monitore ...

Multimedia & Zubehör
gelöst Iphone 6 prob (8)

Frage von jensgebken zum Thema Multimedia & Zubehör ...