格式化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>