How do I include a php page with its own css and javascript on a wordpress page? [closed]

If you need or want to use a shortcode, then that means it can be ran on any page or post at any time and so you should always include the necessary JS and CSS. You include JS and CSS in WordPress using a function that contains wp_enqueue_script() calls, and wp_enqueue_style() calls. The function that includes those calls should hook to wp_enqueue_scripts (this link has good examples), and it should be located in the functions.php file of your WP theme or a file that is included within the functions.php file.

Then the shortcode function itself can just be built out as normal, located inside the functions.php file for your theme or a file that the functions.php file includes. If you're not sure how to do that, here's an example below using output buffering.

add_shortcode('shortcode_name_here', 'shortcode_function_name_here');
function shortcode_function_name_here(){

    // Begin output buffering
    ob_start();

    // Build table example, replace with your code beginning here
    // WP_Query, grab up to 100 blog posts, no paging
    $query_args =  array ( 
        'posts_per_page' => 100, 
        'post_type' => 'post', 
        'no_found_rows' => true,
    );

    $wp_query = new WP_Query( $query_args );

    if( $wp_query->have_posts() ) :

        ?>
        <table>
           <tr>
                <th>Titles</th>
            </tr>
            <?php while( $wp_query->have_posts() ) : the_post(); ?>
                <tr>
                    <td><?php the_title(); ?></td>
                </tr>
            <?php endwhile; ?>
        </table>
        <?php

    // Alternative message if there's no posts       
    else:

        ?>
        <h3>Sorry, but we have nothing for you.</h3>
        <?php

    endif;

    // End build table example, end your custom code here
    // End buffering, save, return
    $output = ob_get_clean();
    return $output;
}