Listing elements from top to bottom rather than horizontally - css

Question

I am trying to list options on my page from top to bottom rather than left to right.
return (
<div className="quizChallenge">
<WebHeader/>
<h2 id = "description"> {this.state.quizzes.description}</h2>
<ol>
<table id="t01">
<tbody>
<tr>
{this.state.options.map((option) => {
return (
<td key={option}>
<button disabled={!this.state.optionEnabled} onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
{option}
</button></td>
);
})}
</tr>
</tbody>
</table>
</ol>
{currentQuestion < 8 &&
<button className="ui inverted button" disabled={this.state.disabled} onClick={this.nextQuestion}>Next</button>
}
{currentQuestion === 7 &&
<button className="ui inverted button" disabled={this.state.disabled} onClick={this.lastQuestion}>Finish Quiz!</button>
}
</div>
);
Can someone assist me with the best way of doing this?

Answer 1

Change this:
<tr>
{this.state.options.map((option) => {
return (
<td key={option}>
<button disabled={!this.state.optionEnabled} onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
{option}
</button></td>
);
})}
</tr>
to
{this.state.options.map((option) => {
return (
<tr>
<td key={option}>
<button disabled={!this.state.optionEnabled} onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
{option}
</button>
</td>
<tr>
);
})}
Explanation by Woodrow Barlow: tr stands for "table row" and td for "table data". with multiple data cells in a single row, they display horizontally. With one data cell per row, they display vertically.