Are tables still used on the simpler stuff?

Get Started
1

I have a short list of items
a<br>
b<br>
c<br>
d<br>
e<br>

and to the far right (float right) I have an image. I need another image (with a little text undeneath it) between the list and the float right image.

Is creating a table with three blocks side by side (<td>) the best way to do this in HTML 5?

Thanks,

Chris

2

Not sure if this is the best practice, but would something like this work?


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3 Columns</title>
</head>


<body>
<div id="container" style="display:inline-block;">
  <div id="col-1" style="float:left;">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
  <div id="col-2" style="display:inline;">
  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="174" height="174" />
  </div>
  <div id="col-3" style="display:inline;">
  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="162" height="175" />
  </div>
</div>
</body>
</html>
3

So they should be in a list

Use the tags that describe the content = the browser will not know it is a list unless you tell the browser it is a list - don’t tell the browser it is a table or a paragraph with line breaks in it when it is a list.

4

Mike,
Thanks for the code. It looks like about the same effort for a server to process as a table. What do you thnk? My site is in HTML5. HTML5 has tables right?

Chris

5

Yes, for displaying tabular data, not for positioning layout,

6

CSS has tables for positioning layout

display:table
display:table-row
display:table-cell

7

True.

I was referring to actual table tags.

I guess it would be possible to simply use a text editor’s “replace” and change to something like
<table> -> <div class=“table”>
<tr> -> <div class=“table_row”>
<td> -> <div class=“table_cell”>

But IMHO that’s changing one for the other without improving anything.

8

[font=calibri]There are various ways of achieving the end result, and it will probably depend on how you want the spacing between the items to work.

[list][]Use CSS display:table;. You don’t need to slavishly recreate the table structure with <div>s as Mittineague has said if there are more appropriate semantic elements you can use.
[]Use CSS display:inline-block;
[]Float both the image blocks to the right
[]Float one image block to the right, float the list to the left, and align the remaining image block in the centre[/list]
If it isn’t tabular data then using a <table> is not a valid option.[/font]

9