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="https://wordpress.stackexchange.com/questions/267732/<?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.