How create table only using <div> tag and Css

Tying to create a form without using tables for may layout I am using div’s & css’s I am uploading two files Line Up Page.html (5.7 KB)
lineup2.php (4.5 KB)
<a class=“attachment”

This is what I have so far
I have uploaded the program and the output. Headers good. Line 1 of data good Lines 2 - 4 always starting one column to the right don’t know why

Thanks

Firstly, might I suggest you run your code through the CSS validator, http://jigsaw.w3.org/css-validator/validator, which will pick up all the typos, such as idth: auto; and ackground-color: #ccc;.

It’s hard to tell from your current content, but that looks to me like tabular data for which you should be using HTML tables. At the very least, it seems to be a series of lists. Using multiple divs like this is unsemantic.

You have one table, with a number of rows, but they contain varying numbers of columns at varying widths. That’s not going to work in a CSS table, any more than it will work in an HTML table. I also think you are misusing display:table-column and should instead use display:table-cell for what are, in fact, the equivalent of cells.

After the first two table rows, you have rows nested within rows, which is why they don’t line up as expected.

4 Likes

Hi,

As Technobear said this really looks like tabular data and a table would be fine especially if you want to span cells as that can’t be done with the css version.

Anyway I tidied up your css version so that is displays correctly.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.div-table {
	display: table;
	width: 85%;
	background-color: #eee;
	border: 1px solid #666666;
	border-spacing: 5px;
}
.tr {display: table-row;}
.tc {
	display:table-cell;
	vertical-align:top;
	background-color: #ccc;
	padding:5px 10px;
}
.tc1 {width:240px;}
.tc4, .tc5, .tc6 {width: 80px;}

</style>
</head>

<body>
<form action="http://localhost/lineup2.php" method="post">
  <div class="div-table">
    <div class="tr">
      <div class="tc tc1">Category</div>
      <div class="tc tc2">Website</div>
      <div class="tc tc3">Website</div>
      <div class="tc tc4">Category</div>
      <div class="tc tc5">&nbsp;</div>
      <div class="tc tc6">&nbsp;</div>
    </div>
    <div class="tr">
      <div class="tc">Name</div>
      <div class="tc">Name</div>
      <div class="tc">Address</div>
      <div class="tc">Override</div>
      <div class="tc">Add</div>
      <div class="tc">Delete</div>
    </div>
    <div class="tr">
      <div class="tc"> Online Networking Groups (Free)</div>
      <div class="tc"> jerome test 1</div>
      <div class="tc"> bvhvhvh</div>
      <div class="tc">
        <input type="radio" name="ov" value="o">
      </div>
      <div class="tc">
        <input type="radio" name="add" value="a">
      </div>
      <div class="tc">
        <input type="radio" name="delete" value="d">
      </div>
    </div>
    <div class="tr">
      <div class="tc"> Associations, Groups &amp; Societies</div>
      <div class="tc"> jerome test 2</div>
      <div class="tc"> hbhggggg</div>
      <div class="tc">
        <input type="radio" name="ov" value="o">
      </div>
      <div class="tc">
        <input type="radio" name="add" value="a">
      </div>
      <div class="tc">
        <input type="radio" name="delete" value="d">
      </div>
    </div>
    <div class="tr">
      <div class="tc"> Salary Guides</div>
      <div class="tc"> jerome test 3</div>
      <div class="tc"> jnjjjjnjjj</div>
      <div class="tc">
        <input type="radio" name="ov" value="o">
      </div>
      <div class="tc">
        <input type="radio" name="add" value="a">
      </div>
      <div class="tc">
        <input type="radio" name="delete" value="d">
      </div>
    </div>
    <div class="tr">
      <div class="tc"> Online Networking Groups (Free)</div>
      <div class="tc"> jerome test 4</div>
      <div class="tc"> xxxxx</div>
      <div class="tc">
        <input type="radio" name="ov" value="o">
      </div>
      <div class="tc">
        <input type="radio" name="add" value="a">
      </div>
      <div class="tc">
        <input type="radio" name="delete" value="d">
      </div>
    </div>
    <div class="tr">
      <div class="tc"> Portals</div>
      <div class="tc"> jerome test 5</div>
      <div class="tc"> zzz</div>
      <div class="tc">
        <input type="radio" name="ov" value="o">
      </div>
      <div class="tc">
        <input type="radio" name="add" value="a">
      </div>
      <div class="tc">
        <input type="radio" name="delete" value="d">
      </div>
    </div>
  </div>
</form>
</body>
</html>

You always have to have the same number of cells in a row (just like tables - but unlike tables you cannot do rowspan or colspan in css). That means you have to output empty cells to match the number of max columns even if some cells are empty.

You don’t need to continually repeat the css if you set it up correctly as you can just use an extra class for the differences.

Also you have a float backup for display table-cell but the only IE browsers that don’t have full support for display:table is IE7 and under and no one should be using those these days (especially since the recent ransomeware attacks on vulnerable systems).

2 Likes

@TechnoBear the “idth: auto; and ackground-color: #ccc;.” were left overs from debugging and not errors on my part

You are right my layout is a tabular data layout:
The three data text fields can vary by size

@PaulOB Thank you very much. When I get a chance I will try the script out. I also need to compare your script to mine and see where I went wrong. I also have to understand what you are doing.

Once again thanks.
If I have any more questions I will let you know

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.