CSSのテーブルレイアウト

-5

私は実際にCSSでこのテーブルを作るための助けをすることができます。私は学校のためにこれを行う必要がありますが、私たちの先生は役に立たず、何も教えてくれません。彼が私たちに語ったことは、w3schoolsを学ぶために使うことですが、私はあまり良くありませんので、私はいくつかの助けに感謝します。CSSのテーブルレイアウト

Really poor sketch

これは私がすでに作られたものです。

<style> 
 
table{ 
 
} 
 
body{ background-image: url("picture.jpeg");} 
 
img{float:left;} 
 
td{border-collapse:collapse; 
 
border-spacing: 10px; 
 
font-family:Verdana; 
 
font-size:11px; 
 
border: 1px solid black; 
 
background-color:white; 
 
width:190px; 
 
height:80px;} 
 
th{border-collapse:collapse; 
 
border:1px solid black; 
 

 
background-color:lightgrey; 
 
font-family:Arial; 
 
font-size:11px; 
 
width:190px; 
 
height:12px;} 
 
</style>

<html> 
 

 
<head> 
 

 

 
</head> 
 
<body> 
 
<h1>Novice</h1> 
 
<table> 
 
    <tr> 
 
    <th>heading 1</th> 
 
    <th>heading 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="picture2.jpg">some text</td> 
 
    <td><img src="picture 3.jpg">some more text </td> 
 
    </tr> 
 

 
    <tr> 
 
    <th>heading 3</th> 
 
    <th>heading 4</th> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="picture4.jpg">text again</td> 
 
    <td class="neki"><img src="picture5.jpg"> and some text</td> 
 
    </tr> 
 
</table> 
 
</body> 
 

 
</html>

出典

2017-11-14 rerboi

実際には何を期待していますか？スケッチと同じように既にテーブルを作成しているようです。 – nabanita

見出しのあるセルとテキストのあるセルの間のスペースを削除しようとしています – rerboi

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Basic Table</h2> 
 
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>    
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

は、ブートストラップテーブルを試してみてください。このコードはあなたを助けます..あなたは大きなデータを使用している場合は、データテーブルを使用します。 refer it

出典

2017-11-14 12:54:23

CSSのテーブルレイアウト

答えて

関連する問題