[HTML] Jak zapisać to w blokach DIV z table

0

Parę lat temu kiedy jeszcze mama chodziła na wywiadówki tworzono strukturę strony za pomocą

Pytanie jest moje takie jak mam zapisać poniższy kod za pomocą bloków div? Mógł by mi ktoś to prze konwertować żeby zrozumiał filozofię div i nie tylko (...)


<div align="center">

	<table border="1" width="800" cellspacing="0" cellpadding="0" height="100" id="table1">

		<tr>

			<td>&nbsp;</td>

		</tr>

	</table>

</div>

<div align="center">

	<table border="1" width="800" cellspacing="0" cellpadding="0" height="100%" id="table2">

		<tr>

			<td width="150">&nbsp;</td>

			<td>&nbsp;</td>

			<td width="150">&nbsp;</td>

		</tr>

	</table>

</div>

<div align="center">

	<table border="1" width="800" cellspacing="0" cellpadding="0" height="150" id="table3">

		<tr>

			<td>&nbsp;</td>

			<td>&nbsp;</td>

		</tr>

	</table>

</div>
0 
<div align="center">

        <table border="1" width="800" cellspacing="0" cellpadding="0" height="100" id="table1">

                <tr>

                        <td>&nbsp;</td>

                </tr>

        </table>

</div>

<div align="center">

        <table border="1" width="800" cellspacing="0" cellpadding="0" height="100%" id="table2">

                <tr>

                        <td width="150">&nbsp;</td>

                        <td>&nbsp;</td>

                        <td width="150">&nbsp;</td>

                </tr>

        </table>

</div>

<div align="center">

        <table border="1" width="800" cellspacing="0" cellpadding="0" height="150" id="table3">

                <tr>

                        <td>&nbsp;</td>

                        <td>&nbsp;</td>

                </tr>

        </table>

</div>
<style>
div#MainPage{
margin:auto;
width:800px;
background:red;
}
div#MainPage div#Header{
height:100px;
background:blue;
}
div#MainPage div#PreContent{
backround:green;
}
div#MainPage div#LeftSidebar{
float : left;
width : 140px;
background:yellow;
height:100%;
}
div#MainPage div#RightSidebar{
float :right;
width : 140px;
background:yellow;
height:100%;
}

div#MainPage div#Content{
background:orange;
height:100%;
float:left;
width:520px;
}
div#MainPage div#Footer{
background:green;
height:150px;
}
div#MainPage div#Footer div#Fleft{
background:blue;
float:left;
width:50%;
height:100%;
}
div#MainPage div#Footer div#Fright{
background:red;
float:left;
width:50%;
height:100%;
}
</style>
<div id="MainPage">
	<div id="header">
		logo
	</div>
	<div id="PreContent">
		<div id="LeftSidebar">
			asdasd
		</div>
		<div id="Content">
			srodek<br/>
			asdasd
		</div>
		<div id="RightSidebar">
			asdasd
		</div>
	</div>
	<div id="Footer">
		<div id="Fleft">
			sadas
		</div>
		<div id="Fright">
			asd
		</div>
	</div>
</div>
0

A jak to zapisać bez zagnieżdżania div? Za pomocą pozycjonowania?

0

1.Kontener "MainPage" możesz sobie odpuścić, jego rolę spełni <body>. Div w stopce możesz śmiało zastąpić spanami.

Lewa kolumną lub prawą możesz wyciągnać jako nadrzędny div, nie ma potrzeby zagnieżdżanie w takiej sytuacji aż dwóch kolumn w jednym divie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1