How do you style an options page for a pluging using the wordpress options API?

Question

I'm coding my first wordpress plugin. I've created an options page with a few options using the wordpress options API functions add_settings_section() and add_settings_field().

Everything works fine so far but all fields on the settings page are in one column. I'd like to style the options page a little "nicer" but I can't find an API for it.

How do I for instance arrange the settings sections and settings field in two columns using <div> or an html <table>? The wordpress API seems to create it's own table structure.

Thank you!

Answer 1

Here is how I handled the same issue.
To give context here is an image of the columns that I wanted.

In my implementation I removed do_settings_sections('my_page'); and used raw HTML instead.

<form action="options.php" method="post">
<?php
settings_errors();
settings_fields('my_page_settings');
// do_settings_sections('my_page');
?>

<table class="form-table">

    <tr>
        <th scope="row">Update Mode</th>
        <td><?php $this->my_page_render_update_mode_field() ?></td>
    </tr>
    <tr>
        <th scope="row">Update</th>
        <td style="padding-top:0px !important;">
            <table class="form-table">
                <tr>
                    <td style="padding-top:0px !important;"><?php $this->my_page_render_page_items_field() ?></td>
                    <td style="padding-top:0px !important;"><?php $this->my_page_render_post_field() ?></td>
                    <td style="padding-top:0px !important;"><?php $this->my_page_render_product_items_field() ?></td>
                </tr>

            </table>
        </td>

    </tr>
</table>
<input type="submit" style="margin-bottom:10px !important;" name="submit" class="button button-primary button-md" value="<?php esc_attr_e('Save'); ?>" />