Menu
Community /Pin to ProfileBookmark
@NogDogMay 09.2005 — #It's not a question of learning HTML. HTML is for contextual markup of the text, not for visual presentation. You need to learn CSS if you want to manipulate the positioning and appearance of HTML elements. For example, to achieve your basic layout request:
Help (tables and text)
I have created a table on the left side of my page, now i want to have pictures on the right side of that page and text in the centre. How is this possible (sorry new to HTML)
Sign in
to post a comment4 Comments(s) ↴
0
@NogDogMay 09.2005 — #It's not a question of learning HTML. HTML is for contextual markup of the text, not for visual presentation. You need to learn CSS if you want to manipulate the positioning and appearance of HTML elements. For example, to achieve your basic layout request:<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 10px;
font: medium arial, sans-serif;
}
#header, #footer {
clear: both;
background-color: silver;
border: solid 1px black;
margin: 0;
padding: 5px 10px;
}
#header { margin-bottom: 10px; }
#footer {margin-top: 10px; }
table {
float: left;
margin: 0;
border-collapse: collapse;
border: solid 1px black;
width: 200px;
font-size: small;
}
th, td {
margin: 0;
padding: 3px 5px;
border: solid 1px black;
}
.right {
float: right;
width: 200px;
margin: 0;
border: solid 1px black;
}
#text {
margin: 0 220px;
padding: 10px;
border: solid 1px black;
}
-->
</style>
</head>
<body>
<h1 id=header>This is the header</h1>
<table>
<tr><th>col1</th><th>col2</th></tr>
<tr><td>row1,col1</td><td>row1,col2</td></tr>
<tr><td>row2,col1</td><td>row2,col2</td></tr>
</table>
<img src="bogus.gif" alt="test image" class=right>
<div id=text>
<h2>Text Section</h2>
<p>This is a test. It is only a test.</p>
</div>
<p id=footer>This is the footer</p>
</body>
</html>