How to create shortcode with html and php content?

To create a shortcode from your functions, you need to use the following code:

function my_shortcode_function(){ 
    if (get_option('pixieclash-standings-background') && get_option('pixieclash-standings-background') != null) {
        $background = esc_url(get_option('pixieclash-standings-background')) 
    } else {
        $background = get_stylesheet_directory_uri() . '/images/standings-bg.jpg';
    }
    $headTxt = get_option('pixieclash-standings-section-heading-top');
    $bottomText = get_option('pixieclash-standings-section-heading-bottom'); 
    if(!empty($headTxt)){ 
        $text_header = '<h4>'. esc_attr($headTxt);.'</h4>';
    } else {
        $text_header = '';
    }
    if(!empty($bottomText)) { 
        $text_footer = '<h3>'.esc_attr($bottomText); .'</h3>';
    } else {
        $text_footer ='';
    }
    if(!empty($headTxt) || !empty($bottomText)){ 
        $container = '<article class="head">'. $text_header . $text_footer.'</article>';
    } 
    $groups = pixieclash_standings_groups();
    if(!empty($groups)) {
        $i = 1;
        $onlyOne = (count($groups) > 1 ) ? '' : 'onlyOne';
        $competitors ='';
        foreach($groups as $group){
            $competitors .= pixieclash_standings($group['id']);
        }
    }
    $data = '
        <section id="standing" style="background-image: url("'.$background.'");">
            <div class="container">'.$container.$competitors'</div>
        </section>';
    return $data;
}
add_action('my-table-shortcode','pixieclash_standings_two');

Make sure you choose a unique name for your shortcode.

Now use the following to output your shortcode:

[my-table-shortcode]

Or, use do_shortcode() in a PHP file:

echo do_shortcode('[my-table-shortcode]');

PS : Please note, because i didn't have access to your functions i couldn't exactly validate the code. You can check your error log for any problems if the code didn't work as intended.

UPDATE

There is a real easy solution that i think works better in your case, and it's using ob_start(). This will record every output of your content and store it in a value to return later. Take a look at this:

function my_content_shortcode(){ 
    ob_start();?>
    <section id="standing"  style="background-image: url('<?php echo (get_option('pixieclash-standings-background') && get_option('pixieclash-standings-background') != null) ? esc_url(get_option('pixieclash-standings-background')) : get_stylesheet_directory_uri() . '/images/standings-bg.jpg' ?>');">

    <div class="container">
        <?php
            $headTxt = get_option('pixieclash-standings-section-heading-top');
            $bottomText = get_option('pixieclash-standings-section-heading-bottom');
        ?>

        <?php if(!empty($headTxt) || !empty($bottomText)): ?>
        <article class="head">
            <?php if(!empty($headTxt)): ?>
                <h4><?php echo esc_attr($headTxt); ?></h4>
            <?php endif; ?>

            <?php if(!empty($bottomText)): ?>
                <h3><?php echo esc_attr($bottomText); ?></h3>
            <?php endif; ?>
        </article>
        <?php endif; ?>

        <?php
            $groups = pixieclash_standings_groups();

            if(!empty($groups)):
                $i = 1;
                $onlyOne = count($groups) > 1 ? '' : 'onlyOne';
                foreach($groups as $group):
                    $competitors = pixieclash_standings($group['id']);
        ?>
        <article class="table <?php echo ($i % 2 != 0) ? 'first' : 'second' ?> <?php echo $onlyOne ?>">
            <h5 class="group-name"><?php esc_html_e('Group', 'pixieclash') ?> <?php echo esc_attr($group['name']) ?></h5>

            <table class="table-body">
                <thead>
                <tr>
                    <th><?php esc_html_e('Competitor', 'pixieclash') ?></th>
                    <th rel="match<?php echo esc_attr($group['id']) ?>"><?php esc_html_e('M', 'pixieclash') ?></th>
                    <th rel="win<?php echo esc_attr($group['id']) ?>"><?php esc_html_e('W', 'pixieclash') ?></th>
                    <th rel="till<?php echo esc_attr($group['id']) ?>"><?php esc_html_e('T', 'pixieclash') ?></th>
                    <th rel="loss<?php echo esc_attr($group['id']) ?>"><?php esc_html_e('L', 'pixieclash') ?></th>
                    <th rel="point<?php echo esc_attr($group['id']) ?>"><?php esc_html_e('P', 'pixieclash') ?></th>
                </tr>
                </thead>
                <tbody>
                <?php if(!empty($competitors)): foreach($competitors as $competitor): ?>
                <tr>
                    <td>
                        <figure>
                            <img src="<?php echo esc_url($competitor['logo']) ?>" alt="<?php echo esc_attr($competitor['name']) ?>">
                        </figure>
                        <?php echo esc_attr($competitor['name']) ?>
                    </td>
                    <td rel="match<?php echo esc_attr($group['id']) ?>"><?php echo esc_attr($competitor['played']) ?></td>
                    <td rel="win<?php echo esc_attr($group['id']) ?>"><?php echo esc_attr($competitor['wins']) ?></td>
                    <td rel="till<?php echo esc_attr($group['id']) ?>"><?php echo esc_attr($competitor['till']) ?></td>
                    <td rel="loss<?php echo esc_attr($group['id']) ?>"><?php echo esc_attr($competitor['losses']) ?></td>
                    <td rel="point<?php echo esc_attr($group['id']) ?>"><?php echo esc_attr($competitor['points']) ?></td>
                </tr>
                <?php endforeach; else: ?>
                <tr>
                    <td colspan="6"><?php esc_html_e('No competitors', 'pixieclash') ?></td>
                </tr>
                <?php endif; ?>
                </tbody>
            </table>

        </article>

        <?php $i ++; endforeach; endif; ?>
    </div>
    </section><?php
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}
add_action('my-table-shortcode','my_content_shortcode');

Now, using [my-table-shortcode] in a text widget or content will exactly act as your section, same as using echo do_shortcode('[my-table-shortcode]'); in a php file.

// Shortcode to generate sidebar daynamic function sidebar_detail_payedpost( $shortcode_attr, $shortcode_content ) {

      // echo "sidebar";
         $current_cat_id = get_queried_object_id();
         $count_post=get_term($current_cat_id);
         $city = isset($_GET['locationID']) ? base64_decode($_GET['locationID']) : $_SESSION['prefer_city'];
         $args = array(
              'post_type' => 'classified',
              'tax_query' => array( 
                                 array(
                                    'taxonomy' => 'classified_location',
                                    'field'    => 'id',
                                    'terms'    => array($city),
                                    'operator' => 'IN',
                                  )
                 ),
              );
            $result = new WP_Query($args);
            // echo $result->found_posts;
           //  print_r($result);
          //   echo "</pre>";
         if ( $result-> have_posts() ){

         while ( $result->have_posts() ){
             $result->the_post();
            ?>
          <!-- <div class="container post_box"> -->
           <div class="container">

                <?php 
                    $data=get_the_post_thumbnail();
                 ?>
                 <div class="SidebarPost">
                <a href="<?php echo get_permalink();  ?>"  data-img='<?php echo ($data); ?>' class="postimage_sidebar" ><?php echo ($data); ?>
                </a> 
                 <h5><a href="<?php echo get_permalink();  ?>"><?php the_title(); ?></a></h5>
                </div>   
            </div>


        <?php    
         }
    } 

}
    add_shortcode('DisplayPayablePost', 'sidebar_detail_payedpost');

This code display paid post in the sidebar and it works fine for me you can add HTML and PHP like this way.

It's fully tested and proper code, I just hope this works for you.