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, 3072 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
Windows Userverwaltung
gelöst Ordnergruppenfreigaben in CSV oder HTML auslesen (3)

Frage von JafThomas zum Thema Windows Userverwaltung ...

Humor (lol)
Zugangskarten zum US-Senat: Bild eines Smart-Chips statt Smart-Chip

Link von magicteddy zum Thema Humor (lol) ...

Microsoft Office
Saubere HTML aus Word-Dokument (19)

Frage von peterpa zum Thema Microsoft Office ...

Neue Wissensbeiträge
Windows 10

Windows 8.x oder 10 Lizenz-Key aus dem ROM auslesen mit Linux

Tipp von Lochkartenstanzer zum Thema Windows 10 ...

Tipps & Tricks

Wie Hackt man sich am besten in ein Computernetzwerk ein

(38)

Erfahrungsbericht von Herbrich19 zum Thema Tipps & Tricks ...

Heiß diskutierte Inhalte
Festplatten, SSD, Raid
POS Hardware und alternativen zu Raid 1? (21)

Frage von Brotkasten zum Thema Festplatten, SSD, Raid ...

Viren und Trojaner
Verschlüsselungstrojaner simulieren (18)

Frage von AlbertMinrich zum Thema Viren und Trojaner ...

Ubuntu
gelöst Nextcloud 12 Antivirus App for Files (10)

Frage von horstvogel zum Thema Ubuntu ...

SAN, NAS, DAS
+100tb Storagelösung (10)

Frage von Data-Fabi zum Thema SAN, NAS, DAS ...