joon1
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?
Why, do you want to do that ? 
If you need to display tabular data, then the
table element is the correct choice. 
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
joon1
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?
Ray.H
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">-->
1 Like
https://w3.org has some very good free validation tools which are well worth bookmarking.
My two favourites are:
-
HTML Validator
-
CSS Validator
1 Like
system
Closed
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.