html - 创建表格网站-6ren

html - 创建表格网站

转载作者：行者123 更新时间：2023-11-28 15:37:28

我正在一个网站上工作，我需要将它转换成一个旧的表格网站。

这是我的实际站点，它使用常规 div，所以在这个 fiddle 上: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 中，我将其转换为表格:

<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？

最佳答案

虽然不建议将表格用于网络(以后更难维护)，但我希望您有充分的理由使用它。您缺少标题部分的表数据 (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>

希望这就是您所追求的。

干杯

关于html - 创建表格网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43990531/

文章推荐： javascript - 从 JS 中的另一个函数调用方法(TypeError 异常)

文章推荐： html - 我可以覆盖 iframe 中的表格背景颜色吗？

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 创建表格网站