Jump to content
aamfirdaus86

Table doesn't look as it is in the editor

Recommended Posts

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/photos/FpHHG3Ay3Rh49ugB8

 

However, after saving in CK Editor, it looks like this: https://goo.gl/photos/8rYzhbSDJQ5sKgfY7

 

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By BrowserBugs
      Hi Gang.
       
      I'm a bit stumped on the best semantic approach for creating Key > Value pairs.
      The data in question is hypothetically a list of results where each has common factors. For this exercise here is some ways I came up with based on lots of study into different approaches including ul, dl, b, class and other wacky ways.
       
      <!-- Option 1 --> <article> <h1>Product One</h1> <p>Description</p> <ul> <li><b>Colour</b> Red</li> <li><b>Price</b> £19.99</li> <li><b>Smell</b> Bad</li> </ul> </article> <!-- Option 2 --> <article> <h1>Product One</h1> <p>Description</p> <dl> <dt>Colour</dt> <dd>Red</dd> <dt>Price</dt> <dd>£19.99</dd> <dt>Smell</dt> <dd>Bad</dd> </dl> </article> <!-- Option 3 --> <article> <h1>Product One</h1> <p>Description</p> <ul> <li><dl><dt>Colour</dt> <dd>Red</dd></dl></li> <li><dt>Price</dt> <dd>£19.99</dd></dl></li> <li><dt>Smell</dt> <dd>Bad</dd></dl></li> </ul> </article> <!-- Option 4 --> <article> <h1>Product One</h1> <p>Description</p> <ul> <li><b class="key">Colour</b> <span class="value">Red</span></li> <li><b class="key">Price</b> <span class="value">£19.99</span></li> <li><b class="key">Smell</b> <span class="value">Bad</span></li> </ul> </article> <!-- Option 5 --> <article> <h1>Product One</h1> <p>Description</p> <ul> <li><b class="colour">Colour</b> <span class="value">Red</span></li> <li><b class="price">Price</b> <span class="value">£19.99</span></li> <li><b class="smell">Smell</b> <span class="value">Bad</span></li> </ul> </article>  
      Yes tables can be used and the power of th / td is known but there must be a good way for this to occur in normal page flow. Does anyone have any experience in these methods and how the data was interpreted by the crawlers?
       
      Thanks as always
    • By schillers
      I have a web page that refers to a CSS document for its styling.

      I have tried to style the font within a table to Verdana but is still displays as Times New Roman? Anyone know Why this is? I have supplied code and screenshot.
      In the CSS:
      table { font-family:Verdana; }  
      The view (Screenshot): http://gyazo.com/9cb8c410f3d856689702e580b59e32bb
       
      Code for one row of the table:
      <table border="0" cellpadding="0" width="550" id="ContactInfo"> <tr> <td width="340" align="right">First Name</td> <td width="10"> </td> <td width="200"><input type="text" name="FirstName" size="30" tabindex="1"></td> <td width="10"><font color="#FF0000">*</font></td> </tr>
    • By paperboy
      Hi!
       
      A friend of mine is helping me with building a website. But we got stuck at some point.
      I need different types of the same tables which would be used for different purposes on the website.
       
      I'm using one on the main page (the "First one", below), another two in the item pages (for list and grid views. The "Second one", below is for the grid view.) And a final one for the item's detail page.
       
      My friend is the one who knows about the CSS and the codes and she says it is easier for her to make a table with codes rather than the built in table maker in the Dreamweaver. This way, she says, it is easier for her to tailor the design upon my wants and wishes.
       
      Everything was OK until what we saw while previewing the result.
       
      The height of the table is 124px.
      There are 4 blocks of boxes which are separated by 1px lines.
      Each of the 4 blocks should have 31px height.
      But at the end, when previewed on the browsers, the uppermost box is 33px and the 3 boxes below that are 29px.
       
      Do you think we are missing something? If so, where?
      Or what do you think we are missing?
       
      I'd appreciate it very much if someone could take his/her time to check it.
       
      Below are the links to the images and the relevant codes.
      If other codes, etc. is necessary, please ask and I will be pleased to help.
       
      Thanks everyone in advance.
       
      (Please let me know if I posted this in a wrong page. I just saw that there's also a CSS page in the forum.)
       
       
      First one:
       
      .FiyatKategoriler_kutular_home{
      width:267px;
      float:left;
      margin:0;
      padding:0;
      margin-top:10px;
      overflow:hidden;
      text-align:left;
      height:124px;
      background-color:#999;
      }

       
      Second one:
       
      .FiyatKategoriler_kutular_grid{
      width:203px;
      float:left;
      margin:0;
      padding:0;
      margin-top:10px;
      overflow:hidden;
      text-align:left;
      height:124px;
      background-color:#999;
      }

    • By oChapperZo
      Hello.
       
      I am new around here and currently learning more skills for my passion in website design. I want to learn PHP and MYSQL and I have watched YouTube videos and looked at several websites to help me build a little project I am working on, but I really need some help which I hope isn't to hard.
       
      I am currently sending data from a form on my website which makes it to my database successfully and displays it back to my website which I need but the help I need is I want to find a way to stop duplicated content being added to the database. I have a xbox-gamertag column in my table which stores names and I want to find a way that if someone types in a gamertag which is already in the database it won't be added to the database and the user will be notifed on screen, it be great to display the gamertag which is already there so something like "Sorry, it appears that the GamerTag you have entered is already available to use," I hope someone can help me here and I look forward to your reply.
       
      Here is my current code to process the data: ( i have changed some data to host, database-name, password and table but my end has the data needed )
       
      <?php $conn = mysql_connect("HOST","DATBASE-NAME","PASSWORD!"); $db = mysql_select_db('DATABASE-NAME',$conn); ?> <?php $yourname = $_POST['user-name']; $xboxgamertag = $_POST['xbox-gamertag']; $game1 = $_POST['game1']; $game2 = $_POST['game2']; $game3 = $_POST['game3']; $sql = "INSERT into TABLE-NAME values('$yourname','$xboxgamertag','$game1','$game2','$game1')"; $qury = mysql_query($sql); if(!$qury) echo mysql_error(); else { echo "Success, $yourname! Your now added to GamerTag Finder with the gamertag $xboxgamertag and want people to add you for $game1, $game2 and $game3."; echo "<a href='xboxgamertags.php'>View Xbox GamerTags</a>"; } ?>  
    • By olliethomas
      Hello,
       
      I'm running an ecommerce platform called Powa for our business, and I've recently given one of our sites a new template, incorporating a whole new look.
      Due to back-end stuff, i have no access to the sites HTML, and all the changes i make must be done in CSS. I've a relatively good grasp of it, but am by no means an expert.
      The desired look of the site's search results page is the guided search refine element positioned on the left hand side, with a 4 column table containing the returned products. After emptying the right container, the table containing the products has had a bit of a wobbly, and decided to send the right-most product on each row to a new row.
       
      Not sure if im making sense, but if you visit www.electricaldealsdirect.co.uk and use the search facility (searching for example: dyson), the problem will be apparent.
       
      Any means of fixing this issue would be much appreciated.
       
      Regards,
      Ollie
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,516
    • Most Online
      4,970

    Newest Member
    Codespinner
    Joined
  • Forum Statistics

    • Total Topics
      65,729
    • Total Posts
      455,373
×