Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen (A bis Z)

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, 3081 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 ..
Ähnliche Inhalte
Webentwicklung
Vorhandenen Windows Webserver Nachbauen (5)

Frage von Leo-le zum Thema Webentwicklung ...

Visual Studio
Person of interest Northern Lights UI nachbauen in WPF (25)

Frage von Herbrich19 zum Thema Visual Studio ...

Java
Layout der Facebook App nachbauen (4)

Frage von Herbrich19 zum Thema Java ...

HTML
Gibt es einen simplen HTML Baukasten? (7)

Frage von thomasreischer zum Thema HTML ...

Neue Wissensbeiträge
Notebook & Zubehör

WOL bei HP Notebooks

(6)

Erfahrungsbericht von Henere zum Thema Notebook & Zubehör ...

LAN, WAN, Wireless

Neue Cisco Catalyst-Serie 9000

Information von Kuemmel zum Thema LAN, WAN, Wireless ...

Sicherheit

Millionen Euro in den Sand gesetzt?

(3)

Information von transocean zum Thema Sicherheit ...

Heiß diskutierte Inhalte
Windows 10
Netzwerkkarte schaltet sich erst nach dem Logon ein (23)

Frage von DerWoWusste zum Thema Windows 10 ...

Windows Server
Seit IP Umstellung DC DNS Fehler (18)

Frage von Yaimael zum Thema Windows Server ...

Netzwerke
Mobile Einwahl IPSec VPN von iPhone iPad T-Mobile zur Pfsense (16)

Frage von Spitzbube zum Thema Netzwerke ...

Weiterbildung
gelöst Fest angestellter Admin oder Systemhaus Admin mit Kundenbetreuung? (15)

Frage von Voiper zum Thema Weiterbildung ...