テーブルとHTML5のマークアップ

私はいくつかの基本的なHTMLとCSSに問題があります。私はHTMLファイルと関係があり、テーブルを見つけようとしていると思います。誰かが私が間違ってやっていることと私の例と同じに見えるようにする方法を教えてもらえますか？以下は、私が求めている例です。テーブルとHTML5のマークアップ

CSSとHTMLコード：

html { 
 
    background: purple; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#pageWrapper { 
 
    display: table; 
 
    vertical-align: top; 
 
} 
 

 
body { 
 
    font-family: Verdana, Arial, sans-serif; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 40%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
nav { 
 
    padding: 15px; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    display: table-cell; 
 
} 
 

 
article { 
 
    width: 550px; 
 
    display: table-cell; 
 
} 
 

 
aside { 
 
    width: 225px; 
 
    display: table-cell; 
 
} 
 

 
footer { 
 
    text-align: center; 
 
} 
 

 
#header { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: white; 
 
} 
 

 
nav ul { 
 
    display: inline; 
 
    margin: 0px; 
 
    list-style-type: none; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li a:link, 
 
ul li a:visited { 
 
    color: green; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #c8b99c; 
 
} 
 

 
RAW Paste Data html { 
 
    background: purple; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#pageWrapper { 
 
    display: table; 
 
    vertical-align: top; 
 
} 
 

 
body { 
 
    font-family: Verdana, Arial, sans-serif; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 40%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
nav { 
 
    padding: 15px; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    display: table-cell; 
 
} 
 

 
article { 
 
    width: 550px; 
 
    display: table-cell; 
 
} 
 

 
aside { 
 
    width: 225px; 
 
    display: table-cell; 
 
} 
 

 
footer { 
 
    text-align: center; 
 
} 
 

 
#header { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: white; 
 
} 
 

 
nav ul { 
 
    display: inline; 
 
    margin: 0px; 
 
    list-style-type: none; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding: 5px 0px 5px 0px; 
 
} 
 

 
ul li a:link, 
 
ul li a:visited { 
 
    color: green; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background-color: #c8b99c; 
 
}

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

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Credit 4 Practical</title> 
 
    <link href="styles.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div id="pageWrapper"> 
 
    <header> 
 
     <img src="logo.jpg" width="301" height="91" alt="Kris Townsend: Educator"> 
 

 
     <nav> 
 
     <ul> 
 
      Home | 
 
      <li><a href="#">Link 1</a> |</li> 
 
      <li><a href="#">Link 2</a> |</li> 
 
      <li><a href="#">Link 3</a> |</li> 
 
      <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
     </nav> 
 

 

 
     <section> 
 
     <p> 
 
      <strong>First Column</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
     </p> 
 
     </section> 
 

 
     <article> 
 
     <p> 
 
      <strong>Article</strong> Vivamus facilisis tincidunt eleifend. Mauris ultricies consequat molestie. Nam congue lectus et augue condimentum eget tincidunt quam pretium. Mauris ullamcorper, justo eu pulvinar placerat, risus nulla faucibus ligula, 
 
      non convallis erat massa ut erat. Proin porta feugiat dolor, sed consequat ante tristique et. Praesent ornare, odio in varius interdum, velit nisl sollicitudin urna, quis dapibus urna sapien eu neque. Maecenas bibendum, libero eu dictum semper, 
 
      sem ipsum congue nisl, a mollis est quam in velit. Cras vitae ligula ut nunc viverra dapibus. Vivamus facilisis eros sit amet est mollis pellentesque. Ut quis odio vel urna ornare lacinia. Aliquam vel justo posuere purus vehicula aliquam. Duis 
 
      ornare mollis nisi luctus suscipit. Sed viverra urna id enim malesuada ac ullamcorper risus sollicitudin. Maecenas faucibus tincidunt facilisis. Donec eu nibh ac metus aliquet imperdiet sit amet in eros. Ut ut nibh elit. 
 
     </p> 
 
     </article> 
 

 
     <aside> 
 
     <p> 
 
      <strong>Aside</strong> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. 
 
     </p> 
 
     </aside> 
 

 
     <footer> 
 
     <strong>Footer</strong> The small print that goes in the footer. <a href="#h">This hyperlink should display as a normally formatted link.</a> 
 
     </footer> 
 

 
    </div> 
 
    <!-- pageWrapper --> 
 
</body> 
 

 
</html>

私は私ができる限り、基本的なことをしようとしている、私は、またはそのような何か-ボックスを曲げるために導入されていません。これは、私は、これは適切な応答である私の最初の応答を期待して、より明確ではなかったことを例の絵は申し訳ありませんが生成

出典

2017-03-04 Bioxvirus

こんにちはBioxvirus：

例？第三者のサイトにリンクするだけでなく、記事自体にコードを含めるようにしてください。また、「これは私が探している例です」*何かにリンクしていない - あなたはそこに何かを含めることを忘れましたか？あなたの最終目標は何か不明です。 –

ここでは、あなたがシミュレートしようとしている例は何ですか？ – Geeky

あなたのHTMLコードに

はありません。コードのどの部分をテーブルに入れたいですか？ – mlegg

答えて

html { 
    background-color: purple; 
    } 


body { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: white; 
} 

#pageWrapper { 
    display: flex; 
} 

section, aside { flex: 1; } 
article { flex: 2; } 

footer { 
    text-align: center; 
} 

nav { 
    padding: 15px; 
    display: flex; 
    justify-content: center; 
} 

nav ul { 
    margin: 0px; 
    list-style-type: none; 
    padding: 5px 0px 5px 0px; 
} 

ul li { 
    display: inline; 
    padding: 5px 0px 5px 0px; 
} 

ul li a:link, 
ul li a:visited { 
    color: green; 
    text-decoration: none; 
} 

ul li a:hover { 
    background-color: #c8b99c; 
} 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Credit 4 Practical</title> 
<link href="styles.css" type="text/css" rel="stylesheet"> 
</head> 
<header> 
    <img src="logo.jpg" width="301" height="91" alt="Kris Townsend: Educator"> 
</header> 

<nav> 
    <ul> 
     Home | 
     <li><a href="#">Link 1</a> |</li> 
     <li><a href="#">Link 2</a> |</li> 
     <li><a href="#">Link 3</a> |</li> 
     <li><a href="#">Link 4</a></li> 
    </ul> 
</nav> 

<div id="pageWrapper"> 
    <section> 
     <p> 
      <strong>First Column</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
     </p> 
</section> 

<article> 
    <p> 
     <strong>Article</strong> Vivamus facilisis tincidunt eleifend. Mauris ultricies consequat molestie. Nam congue lectus et augue condimentum eget tincidunt quam pretium. Mauris ullamcorper, justo eu pulvinar placerat, risus nulla faucibus ligula, 
     non convallis erat massa ut erat. Proin porta feugiat dolor, sed consequat ante tristique et. Praesent ornare, odio in varius interdum, velit nisl sollicitudin urna, quis dapibus urna sapien eu neque. Maecenas bibendum, libero eu dictum semper, 
     sem ipsum congue nisl, a mollis est quam in velit. Cras vitae ligula ut nunc viverra dapibus. Vivamus facilisis eros sit amet est mollis pellentesque. Ut quis odio vel urna ornare lacinia. Aliquam vel justo posuere purus vehicula aliquam. Duis 
     ornare mollis nisi luctus suscipit. Sed viverra urna id enim malesuada ac ullamcorper risus sollicitudin. Maecenas faucibus tincidunt facilisis. Donec eu nibh ac metus aliquet imperdiet sit amet in eros. Ut ut nibh elit. 
    </p> 
</article> 

    <aside> 
     <p> 
     <strong>Aside</strong> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. 
     </p> 
    </aside> 
</div><!-- /pageWrapper --> 

<footer> 
    <strong>Footer</strong> The small print that goes in the footer. <a href="#h">This hyperlink should display as a normally formatted link.</a> 
</footer> 
</html>

....

出典

2017-03-07 17:42:16 Bioxvirus

テーブルとHTML5のマークアップ

答えて

関連する問題