Sometimes you want to present information to your users in a simple column/row structure. HTML tables are an easy way to do this. Let's get started building a simple version for a Rails app.
We begin with opening and closing table tags <table>
to define our feature and then add table row tags <tr>
.
<table>
<tr>
</tr>
</table>
Next, we add table header tags <th>
and input the names that we want for our table columns (table headings will be bold and centered in our columns by default).
<table>
<tr>
<th>Name</th>
<th>Color</th>
<th>Age</th>
</tr>
</table>
Great start! We already have our table header designed. Now, let's add a few more table rows <tr>
. We'll fill these rows with table data tags <td>
and our corresponding data.
<table>
<tr>
<th>Name</th>
<th>Color</th>
<th>Age</th>
</tr>
<tr>
<td>Daz</td>
<td>Orange</td>
<td>3</td>
</tr>
<tr>
<td>Stimpy</td>
<td>Red & White</td>
<td>5</td>
</tr>
<tr>
<td>Cheshire Cat</td>
<td>Purple</td>
<td>71</td>
</tr>
</table>
And just like that, we have a simple table in our app that should look something like this:
Great, right? But not very aesthetically pleasing. Luckily, we can spice this table up with just a few simple extras. Let's throw on a table name using <h2>
tags and then specify a little styling within our opening <table>
tag.
<h2>Famous Cats</h2>
<table style="width:50%" border="1" cellpadding="5">
<tr>
<th>Name</th>
<th>Color</th>
<th>Age</th>
</tr>
And for just a bit more oomph, we can add shading to our table rows by specifying this in our application.css file:
tr:nth-child(even) {
background-color: #ced3d0;
}
Now we have a table feature that's dressed to impress.
Feel free to experiment with more styling until it's exactly how you want. Boom done.
Top comments (0)