I am following the directions in this book to create a simple web page using a table. I make my page and css file exactly as the books example but I get no results. I have an image with text beneath it. I am trying to keep the text from running on forever to the right. I want the text to wrap under the image so later I can add columns of images and text filling my page. Here is the code for the page and css. Can someone tell me why this wont work? Here is an example page. http://www.cookwood.com/html6ed/examples/tables/width_toosmall.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="image map02.css" /> </head> <body> <table border=0 width="350" class="rightsidebar"> <tr><td><img src="Dog.jpg" width="300" height="397"></td></tr> <tr><td class="caption">bbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbbbdbdbbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbd bddbbdbdbdbdbdbdbdbbddbdbbdbdbdbdbdbbdbdbdbdbdbdbdbdbdbdbdbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td></tr> </table> </body> </html> css table, td {border: none;} .rightsidebar {width: 350px;} .caption {font-size:.8em; font-style:italic;} Thanks for any help.
I figured out the cause and maybe I understand why. In my example sentence I type a lot of bdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbd just so I would have a hypothetical sentence. This continuous hypothetical word will not wrap because there are no breaks or an end to the word. The word must be shorter than the width="300" as specified above.
Please trash that book. Any book that teaches the use of tables for layout purposes is so far out of date as to be useless. Your solution discovery is correct. A table is a container for tabular data, and as such must contain all of its cells, each of which in turn must contain all its own data. Any assigned width or height will always be overruled as needed. Further, each cell in a given row will have the same height, and each cell in a given column will have the same width. Instead of learning the wrong way to mark up and lay out a page, learn to write well structured documents with semantic markup. No non-trivial table layout can have either well structured or semantic markup. Start with a good, modern tutorial such as at htmldog.com that teaches html and css correctly. cheers, gary
I discovered a website last knight that said something equivalent to what you just said and decided today I would go back to using <div>. That word semantic is a new one on me. I will check out htmldog.com Thanks for the guidance.