RT-Theme 19 (WordPress) 详情页里面表格的问题

  • A+
所属分类:网站和SEO

RT THEME 19 表格

WordPress主题RT-Theme 19的模板demo里面,有表格的案例。它有自带的样式的。案例是一排灰色,一排白色的。如果你直接去复制EXCEL里面的表格或者其他软件做的表格,就会出现问题。经常出现的问题是:

1,原来的表格样式没有了。变成了不同样子。特别是出现混乱。

2,对文本比较多的地方,出现跑到外边去的情况。

 

在手机端,它会出现不能显示全部内容的情况如下:

事实上RT THEME 19 的表格是采用最简单代码的方式表达的(只有最简单的行和列表格),这是为了要生成响应式表格(Responsive Table),我们看下在编辑器里面demo的表格:

以上是四行四列的表格,而且有一个格子的文本特别多。

在网页端他呈现的是如下效果:

RT THEME 19 表格

在手机端它会自适应调整:

那么这响应式表格(Responsive Table)怎么做呢?

我们先看下它内部的表格的HTML代码(你可以点击编辑器的右上角text看代码):

<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Ipsum</td>
<td>DoloNec vero labore mandamus ex, accusam salutandi sit te. Et has veri magna munere, mea ex justo ponderum. Ea simul propriae persequeris sea, ne quaeque tractatos percipitur mei, magna erant an sea. Te eos novum cotidieque, ea labores mediocritatem his.r</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
</tbody>
</table>

大家看到这些代码不要觉得很难,你对照表格然后再看这些,你可以发现它的规则。知道了规则,你就可以修改你的表格了。

1,开始部分代码<table>表示一个表格的开始,你可以看到最后一个是</table>,这个表示一个表格的结尾。

2,class="table table-striped" 这代码表示这个表格的样式,这个是主题系统定义的,你写了这个,就会呈现demo一样的表格,一排灰色一排白色交替的样子。

3,然后开始表格的头部,代码是:

<thead>
<tr>
<th>#</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>

你对着出呈现的表格头部,这就是4列头部的内容,你要是有5列6列,只要不断增加<th>Table Header</th>这部分的内容。

4,接下来就是表格的内容部分了,它以<tbody>开始,以</tbody>结束。

对照实际的表格,你可以观察一下。我们看比如第2行:

<tr>
<th scope="row">2</th>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>

每行都是<tr>开始,到</tr>结尾。然后后面就是每格里面的内容,以<td>开始,到</td>结尾。

这里你可以看到有个scope="row",这里表示“2”这个是行首,根据系统的表式,是加粗了的一个内容。若开头的部分和下面一样的,不加scope="row",比如说这样:

<tr>
<td>2</td>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>

它就会出现如下样子:

那个"2"就不加粗了。

OK,那你若定义了有6列,那么你这里就会有6个<td> 和 </td>。

按以上的方法,你就可以做出和demo一样的表格。它是自适应调整的。若你自己复制进去的表格,就会出现表格在手机端和电脑端不是很协调的情况。

对着demo的表格,然后你再对着这些代码,多看一会儿你就会知道其中的规律,然后你就可以自己随意的修改了。可以先修改代码生成表格行和列,再回到编辑器里写入内容。真的不是很难哦。

另外介绍几个表格相关的插件和网站:

以下两个Wordpress插件在做表格的时候可以参考下:

https://wordpress.org/plugins/tablepress/

https://wordpress.org/plugins/wp-responsive-table/

以下网站提供了在线制作响应式表格的代码和CSS,但是我测试了感觉还是RT THEME的要好,普通的表格还可以,就是内容很多的表格,它会变形的莫名其妙。

https://ianrmedia.unl.edu/responsive-table-generator-tool

以下这个网站可以在线生成表格的代码,可以加入颜色,功能比较强大。但是不是响应式表格。

http://www.tablesgenerator.com

总结:响应式网站的表格是属于最简单的代码方式,需要耐心根据系统提供的demo去修改。若要表格花里胡哨的,只能是图片方式。

 


案例:这里是3个常见的表格代码:

1,标题加粗,下面的内容是普通的字体:

<h3>Similar Grade</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Execution Standard</th>
<th>ZEICIN Grade</th>
<th>GB</th>
<th>AISI</th>
<th>JIS</th>
<th>DIN</th>
</tr>
</thead>
<tbody>
<tr>
<td>GB/T9943-2008</td>
<td>T1</td>
<td>W18Cr4V1</td>
<td>T1</td>
<td>SKH2</td>
<td>1.3355</td>
</tr>
</tbody>
</table>

2,首行和左列加粗,其他普通的字体:

<h3>Size</h3>
<ul>
 	<li>Round Bar/mm</li>
</ul>
<table class="table table-striped">
<thead>
<tr>
<th>Type</th>
<th>Specification(mm)</th>
<th>Surface Condition</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Cold-drawn Round Steel</th>
<td>φ2-10</td>
<td>Black</td>
</tr>
<tr>
<th scope="row">Hot-rolled Round Steel</th>
<td>φ11-75</td>
<td>Turned</td>
</tr>
<tr>
<th scope="row">Precision Forging Round Steel</th>
<td>φ80-120</td>
<td>Turned</td>
</tr>
</tbody>
</table>

3,左列加粗,右边普通字体:

<h3>More Information</h3>
<table class="table table-striped">
<tbody>
<tr>
<th scope="row">Technology process:</th>
<td>EAF+LF+VD+RS ESR, Unique technology of rapid solidification electroslag smelting, which can great improve the performance of the internal organization of high speed steel, ledeburite meshes smaller and thinner, can make material high toughness,high wear resistance.</td>
</tr>
<tr>
<th scope="row">Property</th>
<td>W18Cr4V is of high-speed tool steel, tungsten has high hardness and red hardness and high temperature strength and hardness at 500 ℃ and 600 ℃ respectively remain in HRC57-58 and HRC52 -53, in addition, also has good high temperature strength and wear resistance, the heat treatment temperature range wide, quenching is not easy to overheating, easy grinding, hot working and heat treatment process is not easy to oxidation decarburization. Good cutting performance for general processed materials.</td>
</tr>
<tr>
<th scope="row">Application</th>
<td>Suitable for cutting tools such as paper knife,twist anchor, broach, tapping, milling, cutting, reamer and others. In terms of performance, the W18Cr4V is an omni-directional steel that can be used for cutting when hot and hard requirements are not the most important. W18Cr4V is also suitable for cold service; Examples are tools used for punching, forming, stamping, and other purposes.</td>
</tr>
</tbody>
</table>
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: