Top-Themen

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?

Mitglied: hewleTT09

hewleTT09 (Level 1) - Jetzt verbinden

15.11.2010 um 15:44 Uhr, 3102 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
Frage von Leo-leWebentwicklung5 Kommentare

Hallo Leute, wir haben momentan noch so einen alten Webserver mit einem W2K8Web R2 + IIS + PHPmyadmin + ...

HTML
HTML Bild neben Tabelle einfügen
gelöst Frage von lordofremixesHTML11 Kommentare

Hallo zusammen, nachdem ich mit dem Sharepoint und vorallem mit der Designkonfiguration nicht weitergekommen bin, habe ich mir jetzt ...

Router & Routing

PFSense HTML Seite zum Hochladen von Bildern

gelöst Frage von EpytirRouter & Routing5 Kommentare

Hey Community , ich habe mal eine Frage bei PFsense kann man ja die Login Seite selbst in HTML ...

Java

Layout der Facebook App nachbauen

Frage von Herbrich19Java4 Kommentare

Hallo, Ich würde gerne eine App schreiben die so ähnlich aussieht wie die von Facebook. Also x Fragmente und ...

Neue Wissensbeiträge
Humor (lol)
IoT-Gefahr: Smartes Aquarium leckt!
Information von Lochkartenstanzer vor 12 StundenHumor (lol)3 Kommentare

Moin, Die IoT-Manie hat weitere Opfer gefunden. Ein Casino-Leck durch ein smartes Aquarium: Allerdings haben sie kein Wasser, sondern ...

Router & Routing

Alte Fritzbox 7270 mit VPN und SIP-Telefonie hinter O2 Homebox 6641 als "Modem"

Erfahrungsbericht von the-buccaneer vor 20 StundenRouter & Routing3 Kommentare

Nun war es soweit: Auch O2 hat mich mit VOIP zwangsbeglückt. Heute am Privatanschluss, in 2 Wochen ist das ...

Sicherheit

Ungepatchte Remote Code Execution-Lücke in LG NAS

Information von kgborn vor 1 TagSicherheit

Nutzt wer LG NAS-Einheiten? In den NAS-Einheiten der LG Network Storage-Einheiten gibt es eine sehr unschöne Schwachstelle, die einen ...

Windows Update

Neue Version KB4099950 NIC Einstellungen gehen verloren

Information von sabines vor 1 TagWindows Update2 Kommentare

Es ist eine neue Version des KB4099950 verfügbar, die das Problem mit den verlorenen Netzwerkeinstellungen lösen soll. Das Datum ...

Heiß diskutierte Inhalte
Sicherheit
Verbindliche Zustellung per E-Mail?
Frage von ahussainSicherheit17 Kommentare

Hallo allerseits, ein Kunde von mir nutzt intensiv Fax. Hauptgrund: zusammen mit einer Empfangsbestätigung ist eine verbindliche Zustellung gewährleistet. ...

Sonstige Systeme
Wie Normenkataloge im Unternehmen bereit stellen?
Frage von MuzzepuckelSonstige Systeme14 Kommentare

Hallo Kollegen, ich lese schon lange hier mit, nun mein ersrer Beitrag, bzw. Frage. :-) Wir benötigen für unsere ...

SAN, NAS, DAS
Entscheidung SAN Dell oder HP
Frage von VincorSAN, NAS, DAS13 Kommentare

Hallo, wir wollen uns für unsere Hyper V Umgebung eine neue SAN Anschaffen. Es laufen 30 VM's darunter, DC; ...

Windows Installation
Kleines Büro - wie PCs einrichten? Domaincontroller sinnvoll?
Frage von Jonas42Windows Installation13 Kommentare

Hallo zusammen, ich überlege derzeit mal wieder, ob ich unsere IT ändern sollte. Es handelt sich um ein Ingenieurbüro ...