Member Avatar for rickster11

Why does my table always go to the bottom of the webpage? The table that lists "books" "author", etc always moves to bottom of screen. I want the image to be at bottom, not the table....

Anyone able to point me in the right direction?

<html>
	<head>
		<title>
			Ruth Bernhard Report
		</title>
	</head>

	<body bgcolor="#eceae1">


		<center>
			<strong>
			<h1>Rick Alvernaz</h1><br>
			<h2>My Term Paper</h2><br>
			<h3>Ruth Bernhard</h3><br>
			</strong>
		</center>

		<img src="/images/ruthbernhard.jpeg"
			align="left" />

		<p style="text-align:center">
			This is a paper about Ruth Bernhard.  As a photographer,
			she ranks with Edward Weston, Ansel Adams, Minor White and Imogen Cunningham.</p><br>

		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>

		<center>
			<strong><h2>Outline</h2></strong>
		</center>

		<ul>
			<li>Early Years</li>
				<ul>
					<li>Birth of Ruth Bernhard</li>
					<li>Divorce of Mother</li>
					<li>Remarriage of Father</li>
				</ul>
			<li>New York City</li>
				<ul>
					<li>Lucian Bernhard invitation</li>
					<li>"Get to work"</li>
					<li>Great Depression</li>
				</ul>
			<li>Early photography</li>
				<ul>
					<li>Photograph "Lifesavers"</li>
					<li>Commercial Work</li>
					<li>Break into Art Photography</li>
				</ul>
			<li>Post World War II</li>
				<ul>
					<li>Alfred Stieglitz</li>
					<li>Edward Weston</li>
					<li>Ansel Adams</li>
				</ul>
		</ul>

		<br>

			<center>
			<table border="3" cellpadding="8" cellspacing="1">
				<tr>
					<tr>
						<td>Book</td>
						<td>Author</td>
						<td>Publisher</td>
					</tr>

					<tr>
						<td>The Eternal Body</td>
						<td>Margaretta K Mitchell</td>
						<td>Chronicle Books</td>
					</tr>

					<tr>
						<td>Between Art and Life</td>
						<td>Margaretta K Mitchell</td>
						<td>Chronicle Books</td>
					</tr>
				</tr>
			</center>
		<br>
		<br>

		<img src="/images/lifesavers.jpg"
			align="center"
			height="200"
			width="250"/>

	</body>
</html>
  • 1 Contributor
  • 1 Reply
  • 97 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by rickster11

Dani AI

Generated

Good catch, . Browsers try to repair broken markup and that automatic recovery is often what makes a table or other element "jump" around. Below are practical checks and a small, modern example to both diagnose the issue and prevent future layout surprises.

  • Run the page through a validator to catch unclosed or improperly nested tags quickly (W3C Markup Validator).
  • Use browser DevTools (Inspect) to view the live DOM and element boxes. Look for unexpected parent/child relationships or stray tags.
  • Ensure table rows (tr) are direct children of thead/tbody/tfoot and not nested inside other tr elements. Bad nesting breaks layout.
  • Replace presentational HTML (<center>, align, bgcolor) and multiple <br> used for spacing with CSS margins/padding.
  • If an image is floated and you need the table to sit below it, apply clear: left (or clear: both) to the table, or use a clearfix. For modern layouts consider Flexbox or Grid instead of floats (MDN: float).

A minimal modern pattern (HTML5 + CSS) that keeps a floated image and a properly placed table:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    .photo { float:left; margin:0 1em 1em 0; width:200px; }
    .books { clear:left; border-collapse:collapse; margin-top:1em; }
    .books th,.books td { border:1px solid #ccc; padding:6px; }
  </style>
</head>
<body>
  <img src="/images/ruthbernhard.jpeg" alt="Ruth Bernhard" class="photo">
  <p>Intro text...</p>
  <table class="books">...</table>
</body>
</html>

For deprecated elements and attributes, see the MDN notes on obsolete tags like <center> (MDN: center).

Member Avatar for rickster11

Oops, sorry. After wasting a lot of time, I realized I didn't close the table.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.