Sometimes you’ve got stuff to show—like a schedule, a price list, or even a leaderboard—that just begs for order. Enter the HTML table. It’s like a mini spreadsheet right in your webpage, and once you get the hang of it, it’s a breeze to set up. Let’s build one together!
The main players are a few tags: <table> to start it, <tr> for rows, <td> for cells, and <th> for headers. Here’s a basic one:
Open that, and you’ll see a tidy grid: “Name” and “Score” as bold headers, with “Alex 85” and “Sam 92” lined up below. The <table> wraps it all, <tr> kicks off each row, <th> marks the top labels, and <td> holds the data.
I’ve fiddled with these a lot. Once, I forgot a </tr> and the whole thing went wonky—lesson learned: close every tag! You can make it fancier too. Add a border with an old-school attribute:
That border="1" gives it a thin outline—crude but effective. (Pro tip: borders are styled better with CSS later, but this works for now.)
Here’s a real one I’ve tried:
It’s a little to-do list, nice and neat. Tables can get wild—spanning rows or columns—but start simple like this. Next time you’ve got data to show off, whip up a <table> and watch it snap into place. It’s like giving chaos a cozy grid to live in!
Sponsored Content
Enhance your HTML skills with our in-depth tutorials and interactive quizzes.
Explore HTML Quiz