Jump to content


Photo

Table doesn't look as it is in the editor

table

  • Please log in to reply
1 reply to this topic

#1 aamfirdaus86

aamfirdaus86

    Forum Newcomer

  • Members
  • Pip
  • 1 posts

Posted 09 August 2017 - 07:27 AM

I made a table with CSS Style using CK Editor 4.5.6. This is the preview looks like and it should look in the front end website. https://goo.gl/photo...HHG3Ay3Rh49ugB8

 

However, after saving in CK Editor, it looks like this: https://goo.gl/photo...YzhbSDJQ5sKgfY7

 

 

The source code:

<table align="center" border="1" cellpadding="4" cellspacing="3" style="background-color:#E6E6FA; border-style:hidden">
<tbody>
<tr>
<td style="background-color:rgb(102, 102, 204); height:53px; width:35px">
<p style="text-align:center"><strong><span style="color:#FFFFFF">NO</span></strong></p>
</td>
<td style="background-color:rgb(102, 102, 204); height:53px; width:77px">
<p style="text-align:center"><span style="color:#FFFFFF"><strong>SKOR IBEPT /UTG/JPU/CBT</strong></span></p>
</td>
<td style="background-color:rgb(102, 102, 204); height:53px; width:64px">
<p style="text-align:center"><span style="color:#FFFFFF"><strong>LEVEL</strong></span></p>
</td>
<td colspan="2" style="background-color:rgb(102, 102, 204); height:53px; width:269px">
<p style="text-align:center"><span style="color:#FFFFFF"><strong>REKOMENDASI PROGRAM</strong></span></p>
</td>
</tr>
<tr>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:35px">
<p style="text-align:center">1</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:77px">
<p style="text-align:center">0.00 - 0.199</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:64px">
<p style="text-align:center">LEVEL 1</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:152px">
<p style="text-align:center">PLUS</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:117px">
<p style="text-align:center">Kursus 10x pertemuan</p>
</td>
</tr>
<tr>
<td style="background-color:rgb(102, 255, 204); border-color:rgb(255, 255, 255); height:20px; width:35px">
<p style="text-align:center">2</p>
</td>
<td style="background-color:rgb(102, 255, 204); border-color:rgb(255, 255, 255); height:20px; width:77px">
<p style="text-align:center">2.00 - 2.29</p>
</td>
<td style="background-color:rgb(102, 255, 204); border-color:rgb(255, 255, 255); height:20px; width:64px">
<p style="text-align:center">LEVEL 2</p>
</td>
<td style="background-color:rgb(102, 255, 204); border-color:rgb(255, 255, 255); height:20px; width:152px">
<p style="text-align:center">PLUS</p>
</td>
<td style="background-color:rgb(102, 255, 204); border-color:rgb(255, 255, 255); height:20px; width:117px">
<p style="text-align:center">Kursus 10x pertemuan</p>
</td>
</tr>
<tr>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:35px">
<p style="text-align:center">4</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:77px">
<p style="text-align:center">3.00 - 3.29</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:64px">
<p style="text-align:center">LEVEL 2</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:152px">
<p style="text-align:center">BASIC / PLUS*</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:117px">
<p style="text-align:center">Kursus 5x pertemuan</p>
</td>
</tr>
<tr>
<td style="background-color:rgb(255, 204, 51); border-color:rgb(255, 255, 255); height:20px; width:35px">
<p style="text-align:center">5</p>
</td>
<td style="background-color:rgb(255, 204, 51); border-color:rgb(255, 255, 255); height:20px; width:77px">
<p style="text-align:center">3.30 - 3.49</p>
</td>
<td style="background-color:rgb(255, 204, 51); border-color:rgb(255, 255, 255); height:20px; width:64px">
<p style="text-align:center">LEVEL 3</p>
</td>
<td style="background-color:rgb(255, 204, 51); border-color:rgb(255, 255, 255); height:20px; width:152px">
<p style="text-align:center">EXCLUSIVE / BASIC*</p>
</td>
<td style="background-color:rgb(255, 204, 51); border-color:rgb(255, 255, 255); height:20px; width:117px">
<p style="text-align:center">Kursus 10x pertemuan</p>
</td>
</tr>
<tr>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:35px">
<p style="text-align:center">6</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:77px">
<p style="text-align:center">3.50 - 3.67</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:64px">
<p style="text-align:center">LEVEL 4.1</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:152px">
<p style="text-align:center">EXCLUSIVE</p>
</td>
<td style="background-color:rgb(187, 187, 187); border-color:rgb(255, 255, 255); height:20px; width:117px">
<p style="text-align:center">Kursus 10x pertemuan</p>
</td>
</tr>
<tr>
<td style="background-color:rgb(255, 102, 153); border-color:rgb(255, 255, 255); height:20px; width:35px">
<p style="text-align:center">7</p>
</td>
<td style="background-color:rgb(255, 102, 153); border-color:rgb(255, 255, 255); height:20px; width:77px">
<p style="text-align:center">3.83 - 4.00</p>
</td>
<td style="background-color:rgb(255, 102, 153); border-color:rgb(255, 255, 255); height:20px; width:64px">
<p style="text-align:center">LEVEL 4.2</p>
</td>
<td style="background-color:rgb(255, 102, 153); border-color:rgb(255, 255, 255); height:20px; width:152px">
<p style="text-align:center">EXCLUSIVE</p>
</td>
<td style="background-color:rgb(255, 102, 153); border-color:rgb(255, 255, 255); height:20px; width:117px">
<p style="text-align:center">Kursus 10x pertemuan</p>
</td>
</tr>
</tbody>
</table>
 
Anyone could help about this?
 
Thank you


#2 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,205 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 09 August 2017 - 08:55 AM

CK Editor includes custom CSS styles, which is why it probably looks different. Most CMS's let you add your own styles so it will be closer to the look of your site.







0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users