Why is the table generating too many rows (LWC)

As you can see in .js, the table has only 1 row, but it is generating 5 rows… I don't understand why.

.js file

import { LightningElement,track } from 'lwc';

export class Table extends LightningElement {
  @track columns = ['', 'COLUMN 1', 'COLUMN 2', 'COLUMN 3', 'COLUMN 4'];
  @track rows = [1];
}

.html file

<template>
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-modal="true">
        <div class="slds-modal__container">
            <!-- header -->
        </div>
        <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover" role="listbox"
            id="lookup-grouped-table-id-1">
            <thead>
                <tr>
                    <template for:each={columns} for:item="col">
                        <th key={col}>
                            {col}
                        </th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <template for:each={rows} for:item="row">
                    <template for:each={columns} for:item="col">
                        <tr key={row}>
                            <td key={row} class="slds-text-align_left">
                                <div key={row} class="slds-form-element__control">
                                    <input type="radio" id={row} value={row} name="default" checked="" />
                                </div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">XXX</div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">ABC</div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">XYZ</div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">OPQ</div>
                            </td>
                        </tr>
                    </template></template>
            </tbody>
        </table>
        </div>
        </div>
        <div class="slds-modal__footer slds-modal__footer_directional">
            <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button>
            <button class="slds-button slds-button_neutral">New Account</button>
        </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>

Edit: I followed what @Nick Nick Cook said, but it's rendering like this: