如何使用<div>标签创建此表？

时间：2016-07-28 15:05:54

标签： html css html-table

图片中显示的表格是使用<div>标签创建的。我使用<div>标记，因为不希望将信息放在表中。虽然我尝试使用<table>标记创建完全相同的表但仍然不成功。

表格的图片

enter image description here

对于此表，请在代码下方 

@charset "UTF-8";

/* Global Styles */

body {
  color: #575c7a;
  line-height: 1.5em;
  font-family: Arial;
  font-size: 14px;
  background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px;
}
.page {
  max-width: 980px;
  margin: 0px auto;
  position: relative; background-color: #fff;
}
a { color: #de9000; }
a:hover { color: #009eff; }
a.cta {
  text-transform: uppercase;
  font-size: .9em;
  font-weight: bold;
  text-decoration: none;
  margin: .5em 0 0 0;
  padding: 0px 12px 0px 0px;
  background: url(../images/cta_arrow.png) no-repeat right 0px;
}
a.cta:hover { background-position: right -50px; }

nav a {
  color: #f5a06e;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-size: .9em;
}
nav a:hover { color: #fff; }

footer { font-size: .85em; color: #9ba0bd; background-color: #515673; padding: 10px 10px 10px 0px; }

/* This class is for placing images inside the cell of the table created using <div> tag */
.image {
  width:240px; /*width of your image*/
  height:120px; /*height of your image*/
  margin:0; /* If you want no margin */
  background-repeat: no-repeat;
  padding:0; /*if your want no padding */
  float: right;

}
.image.one { background-image: url(../images/kashmir-vaishnadevi.jpg) ; }
.image.two { background-image: url(../images/kashmir-amritsar.jpg) ; }
.image.three { background-image: url(../images/leh-ladakh.jpg); }
.image.four { background-image: url(../images/haridwar-agra.jpg); }
.image.five { background-image: url(../images/shimla-manali.jpg); }
.image.six { background-image: url(../images/rajasthan.jpg); }
.clear-fix { clear: both; line-height: 1px; }

/* ***Upto this is the part of the file "screen_styles.css"*** */

/* ***Below is the part of the file "screen_layout_large.css"*** */

@charset "UTF-8";

/* Layout (global rules for all sizes) */
body { margin: 0px; padding: 0px; }
header a.logo { display: block; position: absolute; background-position: 0px 0px; background-repeat: no-repeat; }
nav {
  width: 100%;
  display: block;
  position: absolute;
  background-color: #a6430a;
}

/* Layout Large Screens (default for older browsers) */

nav { top: 275px; }
nav a { margin: 12px 0px 10px 20px; }

article { padding: 60px 20px 10px 20px; }

/* I created this class to determine the position of the table in the page because the table is created with <div> tag instead of <table> tag */
.table_container {
  width: 80%;
  padding-left: 80px;
}

/* This is a table created using <div></div> tag */

<style type="text/css">
.Table
{
  display: table;
}

.Title
{
  display: table-caption;
  text-align: center;
  font-weight: bold;
  font-size: larger;
  text-decoration: underline;
  color: #a6430a;
}

.Heading
{
  display: table-row;
  font-weight: bold;
  text-align: center;
}
.Row
{
  display: table-row;
}
.Cell
{
  display: table-cell;
  border: none;
  /*      border-width: thin; */
  padding-left: 5px;
  padding-right: 5px;
  text-align: right;
}
a.cta 
{
  text-transform: uppercase;
  font-size: .9em;
  font-weight: bold;
  text-decoration: none;
  margin: .5em 0 0 0;
  padding: 0px 12px 0px 0px;
  background: #a6430a;
}
</style>
/* This is a table created using <div></div> tag - End */

@media screen and (max-width: 990px) {
  footer { padding-left: 20px; }
}
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
    <title>My-domain.com | The Travel People</title>
    <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)"   href="css/screen_layout_small.css">
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)"  href="css/screen_layout_medium.css">
    <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  </head>
  <body>
    <div class="page">
      <header>
        <a class="logo" href="index.html"></a>
      </header>
      <article>
        <h1>Package Tours</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <!-- This is a table created using <div> tag -->

      <div class="Table">
        <div class="table_container">
          <div class="Title">
            <p>Tour Packages</p>
          </div>
          <div class="Heading">
            <div class="Cell">
              <p>Kashmir - Vaisnodevi</p>
            </div>
            <div class="Cell">
              <p>Kashmir - Vaisnodevi - Amritsar</p>
            </div>
            <div class="Cell">
              <p>Leh - Ladakh</p>
            </div>
          </div>
          <div class="Row">
            <div class="Cell">
              <div class="image one"></div>
              <p>Duration: 13 Days<br>
                Total Cost: 14,000/-<br>
                Starting Date 1: 7th September, 2016<br>
                Starting Date 2: 16th September, 2016</p>
              <p><a class="cta" href="">Register Here</a></p>
            </div>
            <div class="Cell">
              <div class="image two"></div>
              <p>Duration: 15 Days<br>
                Total Cost: 15,500/-<br>
                Starting Date 1: 7th September, 2016<br>
                Starting Date 2: 16th September, 2016</p>
              <p><a class="cta" href="">Register Here</a></p>
            </div>
            <div class="Cell">
              <div class="image three"></div>
              <p>Duration: 9 Days<br>
                Total Cost: 21,000/-<br>
                Starting Date 1: Would be announced<br>
                Starting Date 2: Would be announced</p>
              <p><a class="cta" href="">Register Here</a></p>
            </div>
          </div>
        </div>
        <div class="Table">
          <div class="table_container">
            <div class="Heading">
              <div class="Cell">
                <p>Haridwar - Mussoorie - Delhi - Agra</p>
              </div>
              <div class="Cell">
                <p>Shimla - Kullu - Manali</p>
              </div>
              <div class="Cell">
                <p>Rajasthan</p>
              </div>
            </div>
            <div class="Row">
              <div class="Cell">
                <div class="image four"></div>
                <p>Duration: 11 Days<br>
                  Total Cost: 10,500/-<br>
                  Starting Date 1: 7th September, 2016<br>
                  Starting Date 2: 16th September, 2016<br>
                  Starting Date 3: 22nd December, 2016</p>
                <p><a class="cta" href="">Register Here</a></p>
              </div>
              <div class="Cell">
                <div class="image five"></div>
                <p>Duration: 11 Days<br>
                  Total Cost: 11,500/-<br>
                  Starting Date: 8th September, 2016</p>
                <p><a class="cta" href="">Register Here</a></p>
              </div>
              <div class="Cell">
                <div class="image six"></div>
                <p>Duration: 15 Days<br>
                  Total Cost: 15,500/-<br>
                  Journey Starts: 7th September, 2016<br>
                  Starting Date 1: 17th September, 2016<br>
                  Starting Date 2: 18th December, 2016</p>
                <p><a class="cta" href="">Register Here</a></p>
              </div>
            </div>
          </div>          
          <div class="clear-fix"></div>
          <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About Us</a>
            <a href="services.html">Services</a>
            <a href="contact.html">Contact Us</a>
          </nav>
          <footer>
            &copy; My Company
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>

我在这里几乎提供了两个CSS文件的完整代码，即'screen_styles.css'和'screen_layout_large.css'，因为如果有人想重新创建它们以便理解，那么这不会是一个问题。我还有两个用于中小屏幕设备的CSS文件，但我认为，如果这个问题得到解决，那么这两个文件可能不会给我任何问题。

我尝试使用<table>标记创建相同的内容，但不能。这是理想的布局，我不能改变这种设计（看起来），如果不是不可能的话。

1 个答案:

答案 0 :(得分：0)

相信我需要付出很多努力。当你添加东西时，问题会增加。

你尝试过使用bootstrap吗？ 这将耗费你的一些时间，但会帮助你获得一个好的页面。

这里有一些你可以从bootstrap应用的东西：

http://www.w3schools.com/bootstrap/bootstrap_images.asp http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp

http://www.w3schools.com/w3css/w3css_cards.asp http://www.w3schools.com/w3css/w3css_tables.asp

试试这件事，我相信你会爱上他们

相关问题
最新问题