Div instead of table

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?

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

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

2 Likes

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?

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">-->
1 Like

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

1 Like

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