格式化HTML表格。框架的模板,无框架的栏目

格式化HTML表格–今天是一个小的基本从练。许多客户希望在WordPress中与他们的员工一起创建自己的文本。为了确保文本对搜索引擎的优化,加入了各种小功能。例如,这些可以是媒体库中的照片,也可以是Youtube视频的嵌入。简单地用复制和粘贴的方式插入表格涉及大量的HTML片段,而这些片段是你在自己的内容管理系统中不希望看到的。今天,让我们来看看一个简单的HTML表格的例子,任何人都可以自己生成和修改。

问题:简单复制HTML表格是不干净的

对于公司的员工来说,不复制表格是很重要的,否则我们的HTML代码中就会有很多 “垃圾”,如上所述。在编辑器的 “视觉 “区域,HTML代码是不可见的。要编辑它,你必须在WordPress编辑器中点击 “文本”。当代码被简单地复制时,它会带走一些我们不想要的小片段。下面是一个来自实践的直接例子。

例子–表格的坏HTML

这里仍然有许多你看不到的东西被复制。

<th class=”headerSort” tabindex=”0″ title=”升序排序” role=”columnheader button”>No.</th>
<th class=”headerSort” tabindex=”0″ title=”升序排序” role=”columnheader button”>区</th>。
<th class=”headerSort” tabindex=”0″ title=”升序排序” role=”列头按钮”>Area</th>

所以我们看到,有些东西被复制和粘贴带走了。

例子–好的表格的HTML

这就是它看起来很干净的样子。

<th>No.</th>
<th>区</th>
<th>面积</th>

解决方案:HTML表格模板

你必须使用一点HTML或了解它。最好是简短地保存,然后复制或编辑它。

  • 提示1:<table>和<tbody>只在开头</table></tbody>只在结尾。
  • 提示2:只在第一行使用<th>,并再次关闭它(th表示 “表格标题”)。
  • 提示3:<tr>打开一个行,</tr>关闭它(tr被称为 “表行”)。
  • 提示4:<td>打开一个值或一个框,</td>关闭它(td表示 “表数据”)。

这里是一个有3列3行的表格。

<table>
<tbody>
<br /><br /><br /><br /><br /><br />
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
</tr>
</tbody>
</table>

这就是完成后的桌子的样子。

标题1 标题2 标题3
文本1 文本2 文本3
文本1 文本2 文本3

另一个有2列2行的例子。

<table>
<tbody>
<br /><br /><br /><br /><br /><br />
<th>标题1</th>
<th>标题2</th>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
</tr>
</tbody>
</table>

另一个有4列5行的例子

<table>
<tbody>
<br /><br /><br /><br /><br /><br />
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
<td>文本4</td>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
<td>文本4</td>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
<td>文本4</td>
</tr>
<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
<td>文本4</td>
</tr></tbody>
</table>

添加更多的列和行

你可以通过在你的 “表”<table>…<table>内开始或关闭一个新的 “表行 “来获得更多的行。这看起来是这样的。

<br /><br /><br /><br /><br /><br />

</td>

根据列的数量,然后必须插入 “表数据”。

<br /><br /><br /><br /><br /><br />
<td>文本1</td>
<td>文本2</td>
<td>文本3</td>
<td>文本4</td>
</tr>