Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Use div's not tables for layout help?

Featured Replies

I am trying to output all my employees in a table style format using <DIV>'s not tables, but the surname isnt displaying like the first name is. is there a way of doing this

 

<?php
include "scripts/connection.php";
$query = "SELECT * FROM employees";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="page_wrapper">
<div id="firstname">
 <?php
 while($row = mysql_fetch_array($result)) {
  echo $row['first_name'];
 }
 ?>
</div>
<div id="surname">
 <?php
 while($row = mysql_fetch_array($result)) {
  echo $row['surname'];
 }
 ?>
</div>
</div>
</body>
</html>

If you're displaying tabular data, use tables.

Maybe you read somewhere that you shouldn't use <table>, but that's for layout, not for actual tables.

 

This.

 

/thread

  • 2 weeks later...

As others have said; the no tables advice is for layouts. People used to use tables to create their sites layout in the days before the div tag and CSS existed.

 

The table tags remain in the w3c specification as the table tags are perfectly suited for creating actual tables of data (which is what the tag set was originally designed for).

 

So use tables.

 

 

Using div's for tables isn't difficult though and it is useful to know how; ie for layouts that are table like but not used for displaying tabular data. Having a general knowledge of CSS layouts will give you the answer automatically.

 

You have style classes for each column that define the widths and background colours for each cell.

 

I.e. a table container class that defines the overall with and any exterior border.

 

A heading cell class that defines the width (as a %) and background colours etc for the table column headings (this kinda shows why div's for true tables is actually inefficient as variable width columns leads to CSS bloat).

 

Then he same for your cells (ie single colour or double up for alt colours).

 

Of course if you are savvy you can make it optimised but it takes a lot more effort than just using the table tags for their intended purpose.

Edited by FizixRichard

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.