Question

我正在网站上工作，我需要将其转换为旧的表格网站。

这里是我的实际网站，它正在使用常规div，所以这个小提琴：https://jsfiddle.net/k3ox895w/4/

在这里我尝试使用表格：https://jsfiddle.net/k3ox895w/5/

我把它转换成了桌子，但一切都搞砸了。不知道我需要编辑什么使它看起来像实际的div网站，就像你在这里看到的图像一样：

这是DIV网站的HTML网站：

<header class="main-header" id="header">
    <h1 class="name"><a href="#">ROSSS</a></h1>
    <ul class="main-nav">
        <li>
            <a href="#">Link 1</a>
        </li>
        <li>
            <a href="#">Link 2</a>
        </li>
        <li>
            <a href="#">Link 3</a>
        </li>
    </ul>
</header>
<div class="banner">
    <h1 class="headline">BONG</h1><span class="tagline">MIKE</span>
</div>
<section>
    <h2>Features</h2>
    <div class="row">
        <div class="item-1 col">
            <i class="fa fa-address-card fa-5x"></i>
            <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
        <div class="item-2 col">
            <i class="fa fa-calendar-check-o fa-5x"></i>
            <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
        <div class="item-3 col">
            <i class="fa fa-folder fa-5x"></i>
            <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
        <div class="item-4 col">
            <i class="fa fa-video-camera fa-5x"></i>
            <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
        <div class="item-5 col">
            <i class="fa fa-shopping-cart fa-5x"></i>
            <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
        <div class="item-6 col">
            <i class="fa fa-podcast fa-5x"></i>
            <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
    </div>
</section>
<section class="about">
    <h2 class="white">Hello</h2>
    <div class="row">
        <div class="col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure 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>
        </div>
        <div class="col">
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitaHELLOta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
        </div>
    </div>
</section>
<footer class="main-footer">
    <div class="footer-inner">
        <span>&copy; 2017 CSS Layouts</span>
    </div>
</footer>

在这个HTML中，我将其转换为Tables：

<table class="main-header" id="header">
  <tr>
   <td><h1 class="name"><a href="#">ROSS</a></h1></td>
   <td> <ul class="main-nav">
            <li>
                <a href="#">Link 1</a>
            </li>
            <li>
                <a href="#">Link 2</a>
            </li>
            <li>
                <a href="#">Link 3</a>
            </li>
        </ul></td>
  </tr>

</table>


<table class="banner">
<tr>
        <h1 class="headline">BONG</h1><span class="tagline">MIKE</span>
</tr>
</table>


<table>
<tr>
<th><h2>Features</h2></th>

<td class="item-1 col">
                <i class="fa fa-address-card fa-5x"></i>
                <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

<td class="item-2 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
                <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>


<td class="item-3 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
                <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>


<td class="item-4 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
                <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>

<td class="item-5 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
                <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>

<td class="item-6 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
                <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>

</tr>

<tr>
</table>


<table class="about">
<tr>
<td class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure 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>
</td>

<td class="col">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
</td>

</tr>

<tr class="main-footer">
<td class="footer-inner"><span>&copy; 2017 CSS Layouts</span> </td>
</tr>

</table>

如何正确地将它从DIV转换为TABLES？使用现有的CSS？

Answer 1

虽然不建议将表用于Web（以后难以维护），但我希望您有充分的理由使用它。您丢失了标题部分的表数据（td），并且忘记将行放在正确的位置。

我建议使用像Dreamweaver这样的程序，如果你不熟悉手工编码表，一个缺少的HTML元素会破坏外观。

以下是我为解决问题所做的代码。

* {
	box-sizing: border-box;
}
body {
	font-family: 'Lato', sans-serif;
	line-height: 1.5;
	margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
	font-size: 1.2em;
}

h1{
	font-size: 4em;
	text-transform: uppercase;
}

h2{
	font-size: 2.8em;
	text-align: center;
	margin: 40px 0px;
	
}

.center{
  text-align: center;

}

i.fa{
	text-align: center;
	display: block;
	margin: 0 auto;
	color: #34495E;
}


.white{
color: #fff;
}

h2, h3,
a {
	color: #34495e;
}

h1, h2, h3 {
	text-transform: uppercase;
}



a {
	text-decoration: none;
}
img {
	max-width: 100%;
}

table,th{width:100%;}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
	font-size: 1.35em;
	margin: 0;
}

.main-nav {
	margin-top: 5px;float:RIGHT;
}
.name a,
.main-nav a {
	text-align: center;
	display: block;
	padding: 10px 15px;
	color: #fff;
}
.main-nav a {
	font-size: 1em;
	text-transform: uppercase;
}
.main-nav a:hover {
	color: #18bc9c;
}


/* ---- Layout Containers ---- */

.main-header tbody {padding: 1em 0.7em;}
.main-header tbody, .main-header tr {width:100%;}
.main-header td {width:50%;}
.main-header h1{float:left;}
.main-header ul{float:right;}
.main-header ul li{float:left;}

.banner,
.main-footer {
	text-align: center;
}
.banner {
	color: #fff;
	background-color: #18bc9c;
	padding: 6.5em 0;
	margin-bottom: 32px;
}
.col {
	padding: 0 1.9em;

}
.main-footer {
	background: #d9e4ea;
	padding: 2em 0;
}


#header{
  width: 100%;
	background-color: #34495e;
}

/* ---- Page Elements ---- */

.logo {
	width: 256px;
}
.headline,.tagline {
	margin: 0;
	color: #fff;
}

span.tagline{
	font-size: 1.5em;
}

.feat-img {
	border-radius: 5px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.col {
   flex: 0 0 calc(33.33% - 30px);
   margin: 15px 5px;

}

img { 
    width: 100%;
}


.about{
	background: #18bc9c;
	margin: 90px 0px 0px 0px;
	color: #fff;
	padding: 30px 0px;
}


.primary{
	flex-grow: 2;
}



/* ================================= 
  Base Styles
==================================== */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.row {
	flex: 1;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

	/*.main-header,*/
	.main-nav,
	.row {
		display: flex;
	}

	.main-header {
		flex-direction: column;
		align-items: center;
	}


}

@media (min-width: 1025px) {

	.main-header {
		flex-direction: row;
		justify-content: space-between;
	}

<table class="main-header" id="header">
  <tr>
   <td class="title"><h1 class="name"><a href="#">ROSS</a></h1></td>
   <td class="nav"> <ul class="main-nav">
			<li>
				<a href="#">Link 1</a>
			</li>
			<li>
				<a href="#">Link 2</a>
			</li>
			<li>
				<a href="#">Link 3</a>
			</li>
		</ul></td>
  </tr>

</table>


<table class="banner">
<tr>
<td>
		<h1 class="headline">BONG</h1><span class="tagline">MIKE</span>
		</td>
		</tr>
</table>


<table>
<tr>
<th><h2>Features</h2></th>
</tr>
</table>
<table>
<tr>
<td class="item-1 col">
				<i class="fa fa-address-card fa-5x"></i>
				<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>

<td class="item-2 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
				<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>


<td class="item-3 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
				<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>
</tr>
<tr>
<td class="item-4 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
				<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>

<td class="item-5 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
				<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>

<td class="item-6 col">
<i class="fa fa-calendar-check-o fa-5x"></i>
				<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</td>

</tr>

<tr>
</table>


<table class="about">
<tr>
<td class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure 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>
</td>

<td class="col">
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
</td>

</tr>

<tr class="main-footer">
<td class="footer-inner" colspan="2"><span>&copy; 2017 CSS Layouts</span> </td>
</tr>

</table>

希望这就是你所追求的。

干杯

Answer 2

对于顶部导航栏，您需要一个如下所示的CSS：

.main-nav {
    margin-top: 5px;
    list-style: none;
}
.main-nav  > li {
    display: inline-block;
    float: left;
    position:relative;
  }

创建表网站

2 个答案: