Table in an article: PHPFusion 8 Support

Home
Search

Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.

Hey. I wanted to add a table in an article and I used this code:

Code Download source

<!DOCTYPE html>
<html>

<head>
<style>
table,th,td
{
border:0px solid black;
border-collapse:collapse;
padding:5px;
}
</style>
</head>

<body>
<table style="width:400px">
<tr>
  <td>example</td>
  <td>example</td>      
  <td>example</td>
  </tr>
<tr>
  <td>example</td>
  <td>example</td>      
  <td>example</td>
</tr>
<tr>
  <td>example</td>
  <td>example</td>      
  <td>example</td>
</tr>
</table>
</body>

</html>

It worked but I also want to add space between 1 row and the other. I tried with the padding and more attributes and nothing worked.

0 replies

Margin would work better, I think. Padding adds space within the element, margin adds space outside and between elements.

Code Download source

<style>
table,tr,td
{
border: 0px solid black;
border-collapse: collapse;
padding: 5px;
margin: 5px;
}
</style>

0 replies

It doesn't work :/

0 replies

The border collapse is pushing the lines together. remove the "border-collapse:collapse;" line from the styles:

Code Download source

<style>
table,tr,td
{
border: 1px solid black;
margin: 5px;
padding: 5px;
}
</style>

0 replies

Works, :).
Thz

Merged on May 04 2014 at 15:17:12:
Without open a new thread i have another question.
How can i make the columns clickable? I would like to be able to sort every thing in a column in alphabetical order and vice versa, same with numbers, a +/- function basically.

Edited by Skulz on 04-05-2014 16:17, 10 y

0 replies

— 1 month later —

You will need a jquery tablesorter. I'm using this for 8's new core function - tablesorter();

This is the repository I used. Open source. It's 1.7mb so I wouldn't hit this server.

http://tablesorter.com/docs/

0 replies

+1 for tablesorter. I might use that in other projects.

0 replies

I have read the link but don't understand how it have to be installed.

0 replies

The link given by hien is something that will be in version 8.

0 replies

@Skulz - to answer your question on how to use it:

1. Download the .zip package for the jquery add-in

2. Extract the .zip and upload jquery.metadata.js and jquery.tablesorter.js to your site under /includes/jquery/
the rest of the files can probably be ignored.

3. edit your table code like so:

Code Download source

<?php
add_to_head("<style>
table,th,td
{
border:0px solid black;
margin: 5px;
padding:5px;
}
</style>
<script type='text/javascript' src='".INCLUDES."jquery/jquery.metadata.js'></script>
<script type='text/javascript' src='".INCLUDES."jquery/jquery.tablesorter.js'></script>
<script>
$(document).ready(function() 
    { 
        $('#myTable').tablesorter(); 
    } 
); 
</script>
");
?>

<table style="width:400px" id='myTable" class="tablesorter">
<thead>
<tr>
  <td>header1</td>
  <td>header2</td>      
  <td>header3</td>
  </tr>
</thead>
<tbody>
<tr>
  <td>data1</td>
  <td>data2</td>      
  <td>data3</td>
</tr>
<tr>
  <td>data1</td>
  <td>data2</td>      
  <td>data3</td>
</tr>
</tbody>
</table>

Note: the ID "myTable" in the <script> tags and in the <table id=""> needs to be adjusted to whatever ID you give the table. It MUST have an ID for it to work.

That should get jquery sorting, the quick way.

Edited by skpacman on 12-05-2014 16:43, 10 y

0 replies

With this code doesn't even appear the normal table.

0 replies

Hi,

TinyMCE Editor has an option to help you build tables.

Regards.

http://awesomescreenshot.com/0342rtz089

Edited by Craig on 08-05-2014 13:04, 10 y

0 replies

Quote

Craig wrote:

Hi,

TinyMCE Editor has an option to help you build tables.

Regards.

http://awesomescreenshot.com/0342rtz089

The problem is tablesorting not the table.
Anyway tiny editor doesn't work on my site, when using it the white background where I can write became the same image background of the site, making impossible to see or write properly xD

0 replies

looks like articles don't like php. There are other solutions. I'll respond again when I have a fix.

0 replies

Quote

skpacman wrote:

looks like articles don't like php. There are other solutions. I'll respond again when I have a fix.

I want to use this on articles and custom pages, but it happened the same thing also there.

Code Download source

<table style="width:400px" id='myTable" class="tablesorter">

Adding id and class to the table makes it disappear, ofc tablesorter doesnt work

Edited by Skulz on 12-05-2014 21:45, 10 y

0 replies

PHP works on Custom Pages so I can make it work there. I'm working on something else that will enable jquery TableSorting on all pages.

Merged on May 14 2014 at 10:21:39:
I got the tablesorter to work perfectly after doing quite a bit of digging.

Follow the directions on the PHPFusion USA TableSorter Demo page.

I intend to make this an infusion for 7.02.07 here soon, complete with table themes and other goodies. The code linked above is just to get it working short-term.

Edited by skpacman on 14-05-2014 19:06, 10 y

0 replies

Works pretty well, epic work man :)

0 replies

np. I'll post here again when I get an infusion for it done. I got it started on GitHub.

0 replies

Category Forum

Code Snippet and functions - 8

Labels

None yet

Statistics

Views 0 views
Posts 17 posts
Votes 0 votes
Topic users 5 members

5 participants

Notifications

Track thread

You are not receiving notifications from this thread.

Table in an article

17 posts

PHPFusion

Resources

Community

Development