Div instead of table

#1

I have code1 at http://form.kr/test/removeTable.php
The code1 has table which I like to remove.

I made the code2 below the code1 for removing table at the page.

However, I failed to make it the same result with the code1
how can I make the code2 the same result in displaying with the code1?

#2

Why, do you want to do that ? :wonky:

If you need to display tabular data, then the
table element is the correct choice. :winky:

coothead

#3

Hi there joon1,

here are some code examples…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }
*, *::before, *::after {
    box-sizing: inherit;
 }
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1, h2 {
    font-size: 1em;
    color: #444;
    text-transform: uppercase;
 }

/* display: table */

#container {
    display: inline-block;
    width: 100%;
    max-width: 25em;
 }
#container > div {
    display: table;
    width: 100%;
 }
#container > div  div {
    display: table-cell;
    padding: 1em;
    border:1px solid #999;
 }
#container > div:nth-of-type(1) div:nth-of-type(1),
#container > div:nth-of-type(3) div:nth-of-type(1) {
    width: 50%;
    background-color: #ff0;
 }
#container > div:nth-of-type(1) div:nth-of-type(2),
#container > div:nth-of-type(3) div:nth-of-type(2) {
    width: 50%;
    background-color: #9acd32;
 }
#container > div:nth-of-type(2) div,
#container > div:nth-of-type(4) div {
    width: 100%;
    background-color: #ffc0cb;
 }

/* display: flex */

#container2 {
    display: flex;
    max-width: 25em;
    flex-wrap: wrap;
 }
#container2 > div {
    padding: 1em;
    border:1px solid #999;
 }
#container2 > div:nth-of-type(1),
#container2 > div:nth-of-type(4) {
    width:50%;
    background-color: #ff0;
 }
#container2 > div:nth-of-type(2),
#container2 > div:nth-of-type(5) {
    width:50%;
    background-color: #9acd32;
 }
#container2 > div:nth-of-type(3),
#container2 > div:nth-of-type(6) {
    width:100%;
    background-color: #ffc0cb;
 }
</style>

</head>
<body> 

<h1>display examples</h1>

<h2>display table</h2>

<div id="container">
  <div>
    <div>lorem Ipsum.</div>
    <div>Nam venenatis diam.</div>
  </div>
  <div>
    <div>Donec vehicula diam non leo efficitur.</div>
  </div>
  <div>
    <div>In sapien massa, feugiat.</div>
    <div>Cras euismod.</div>
  </div>
  <div>
    <div>Proin ut luctus dolor.</div>
  </div>
</div> 

<h2>display flex</h2>

 <div id="container2">
    <div>lorem Ipsum.</div>
    <div>Nam venenatis diam.</div>
    <div>Donec vehicula diam non leo efficitur.</div>
    <div>In sapien massa, feugiat.</div>
    <div>Cras euismod.</div>
    <div>Proin ut luctus dolor.</div>
</div>

</body>
</html>

coothead

#4

Thank you, coothead for your code.

I copied your code and made a page at http://form.kr/test/test2.php

However, the page is all white.
What’s wrong with the page?

#5

You have commented the style sheet out incorrectly with an invalid closing comment.
All the code that follows is being ignored.

You have closed it with -]


<!--<link rel="stylesheet" href="screen.css" media="screen">-]

It should be closed with -->

<!--<link rel="stylesheet" href="screen.css" media="screen">-->
#6

https://w3.org has some very good free validation tools which are well worth bookmarking.

My two favourites are:

  1. HTML Validator

  2. CSS Validator