HTML: Excel sheets - table

Hello, and welcome to this tutorial where y'all will learn how to use HTML to make a table.

I do warn that this is not a short tutorial, we will start outta the foundations and get into complex stuff.

Well, the first step is to add an HTML component to your blog, it's where the Excel sheet is going to take life.

(Optional) Press Enter two or three times inside the component, so you can copy and paste the code more comfortably and easily.

Now copy this code:

<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width: 100%;">

<thead>

<tr style="color: white; background-color: #444; line-height: 1.6;">

This creates the foundation of your table. The <table> tag starts the table, and the <thead> section is where your header row will go. The last line is the 1st row of the sheet in itself; the <tr> tag (standing table row) has inside some ideal attributes for the head of our sheet:

+style="" is modifying the... style of the sheet's head in specific, then you can put in all rows CSS attributes to make incredible looks, like a lovely orange thematic one :)

color:

Here it does indicate the font color, nothing that interesting by now. This does accept color words for programming, but if you want a highly specific color, you might use either RGB or Hexadecimal

But taking those values is just as simple as entering this official Google website!

Note: if you're using CSS attributes, separate or finish them with an attached semicolon.

background-color:

The purpose of this CSS attribute is to change the background color, as expected, to the specified color after the double-dots. There are the same color choices as with color:

line-height:

This may be important for the visual look: The higher the value, the cells will be more vertically aligned.

So if you have fewer rows, it would be pleasing to see airy ones, and on the other hand, it would be easier to surf through more compacted sheets.

border-collapse:

The are 2 possible values for border-collapse:

+border-collapse: collapse; This blocks the borders of two cells to a shared one.

+border-collapse: separate; to make cell-spaces. It is mega useful when using border-spacing

border: X px solid (color);

This is how we can modify our borders. We replace the X with any value we want, so we'll get an X-pixel-thick border. We also add the word 'solid' naked, then the border will be visible. And for getting a specific color, use either hexadecimal or the words.

+It is not necessary to use them all at the same time.

border-spacing: X px;

This is the modern form of cellspacing, so replace the X with a value in pixels.

So, if you don't want any space, don't put 0 px; just use border-collapse: collapse.

width: X%  or X px

This forces the table to use X% of the available space that the page (or the component) lets, or use the specific amount of pixels you want to!

-But there is an option (style="width: fit-content;") where all columns get automatically fixed!

border=""

It is an HTML element that creates the border of the cells. 1 is a normal value, with 0 the sheet will be 'floating', and with more than 1 the borders will be thicker.

This is 'deprecated', meaning old. So you can use the inline CSS form border: 1px solid (color);

cellpadding="10"

It preserves a little air inside the cells; with 0 or without this attribute, the sheet will look bad.

The new form of doing so may be padding: X px;, 'cause this is deprecated.

cellspacing="0"

The 0 value is natural for the space between the cells, and you must believe that nobody uses more than 0 in cellspacing="". (Do you imagine a spaced row??)

This is also deprecated, so use border-collapse: collapse; when you don't want air.

Advice for the first row:

+If you have 89 rows in your sheet (as I have D:), maintain the 1st row airier.

+As it is usual to have darker tones in the 1st row and column, we ought to get the font color straight white.

+For, if you want all the titles in green, you might put the "color: green;" inside the <tr> and not an individual line for each <th>

Well, now that we fixed the start of our sheet, we may continue with the actual sheet :D

<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width: 100%;">

 <thead>

    <tr style="color: white; background-color: #444; line-height: 1.6;">

      <th>Determinant</th>

      <th>Expedient</th>

      <th>Date</th>

      <th>Notes</th>

 </thead>     

</tr>

This, ladies and gentlemen, is the 1st row of our sheet. Let me explain what's going on:

+Previously, we opened the table (<table>) and its header section (<thead>), and added some basic visual styles.

+Now, inside the first table row (<tr>), we’re adding table headers using the <th> tag.

+Each <th> (which stands for table header) creates a column title. Inside the opening <th> and closing </th>, you place the name of that column — like "Determinant", "Date", "Note", etc.

Since these are the titles the persons will see at the top of your sheet, they are highly important.

I'll show a visual example of the head, but add the sheet-finisher </table> tag so nothing will just blow up:

<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width: 100%;">

<thead>

<tr style="color: white; background-color: #444; line-height: 1.6;">

<th>Determinant</th>

<th>Expedient</th>

<th>Date</th>

<th>Notes</th>

</tr>

</thead> </table>

Here is how it looks when programmed:

Good, in the last main stage, I'll just show how to make all the other rows!

...

 </thead> 

 <tbody>

    <tr style="background-color: #FFFFFF; line-height: 1.6;">

      <td style="padding: 4px 6px;">Peter</td>

      <td>Expedient 1:40SCZ</td>

      <td>July 4 2025</td>

      <td>We might fire him</td>

    </tr>

...

1-We see the previous closing of the head.

2-An old opener <tr> tag with some visual modifiers on.

3-The new opener <td> tag with a new CSS attribute that I'll explain in a minute, and a </td> closing the info.

4-And a closer </tr> tag that closes the row; giving space for a new one :)

Here, the <tr> and </tr> tags are seen again, and we've got new ones with <tbody>, <td>, and </td>!

Those build the individual cells that aren't the title ones:

-<tr> is for the Table's Rows, you must open one before using an <th> or an <td>

-<th> is for the Table's Head, is used for head cells, and it bolds text and centers it automatically.

-<td> is for Table's Data, used for normal cells and uses normal text and is aligned against the left.

-<table> is the tag that opens the table, and is mega-important to use and close properly.

-<thead> is the tag that opens the first rows where we usually write things like "Date" or so.

-<tbody> is the tag that opens the body (the rest of the rows), where we put our data and the <td>'s.

-<tfoot>* is the tag that opens the last rows; used for summaries and not obligatory to use.

++It is essential to differentiate between those tags, else the table might have problems

You may have seen this in one of the <td> tags, so what does it do?

The padding adds space inside the cell between the content (like text) and the border of the cell.

In this example:  <td style="padding: 4px 6px;">Peter</td>

4px 6px means 4 pixels of padding on the top and bottom and 6 pixels on the left and right. This helps your cells feel less cramped and more readable.

And which differences are between padding and line height?

+padding = space inside the cell, surrounding the content.

+line-height = controls the overall height of the cell.

You can combine both for better control, but just use padding to fine-tune spacing inside each cell and line-height to adjust vertical spacing across the row.

I do recommend using those options of padding: 4px 6px for lots of data, 8px 12px for balanced lists, and 12px 16px for short lists.

Visual example with all the explained stuff, and of course the </table>:

Let's be quick:

<tfoot></tfoot> is like to open <thead>, and they are very similar.

We use this when you want to highlight the lower rows of your table, and it grants the visual effects of <thead>. Put it before <tbody>. And you can use either <th> or <td> with it. (sadly, there's no <tf>)

Now, with all you have learnt, let's do that outrageously gorgeous sheet!! :D

This creates a break-line in the text, similar to pressing Enter in an Email.

It is preferable to use <br> rather than <br />because it is the most standardized and does not make errors in any HTML variant. <br /> is the syntax used in the XHTML standard, yet using it won't send you straight to hell. <br /> is not the closing of <br>; since it is just a break-line, not a style.

E. G:<td style="padding: 4px 6px;">Guillermo <br>(ghee-shermh-moe)</td>

--We see here an established padding and a <br> inside the zone where the text should go; so there will be a break-line:

<small> and </small> is the perfect attribute for mini notes or pronunciation tips, since this causes the inside text to go smaller.

E.G: <td>Guillermo <br> <small>(phonetically: /ghee-shermh-moe/)</small></td>

3: style="text-align: "

This CSS attribute of text-align can be used for the 4 modes of writing!!

3.1: style="text-align: left;"

It standardizes text to the left until you indicate the opposite. It is implicit for English and such languages, but it is useful when constantly changing alignment modes.

3.2: style="text-align: center;"

It centers the text; incredible for aligning small notes or hyperlinks.

3.3: -style="text-align: right;"

It is implicit for Arabic and such languages, and makes all get aligned against the right. Useful for dialogs, commentaries, and comparisons.

3.4: -style="text-align: justify;"

The favorite of weird people; It is a Word classic that had to be included there.

We love y'all, justify users :D

3.5: -style="text-align: start;" (New!)

Let's explain it fast: if you use Hebrew or Arabic, it uses right-to-left orientation; if you use Greek or English, it uses left-to-right orientation.

If you want to revert those orientations, use style="text-align: end;"

3.6: Vertical alignments:

Those are more occasional, but a must to know:

We have style="vertical-align: (top, middle, or bottom);" and we also have vertical-align: (super and sub), to make visual superscripts and subscripts.

This is an example of a hyperlink; this might be helpful:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer ugc">Link's Text</a>

The href="" inside <a> is telling <a> the function it must focus on; in this case, to open a hyperlink. The text that is between ...> and </a> is how we're going to see the link; and the link inside quotation marks is the link, for sure :)

Why use target="_blank" and rel="whatever"?

+target="_blank" tells the browser to open the link in a new tab. This way, users can click the link without leaving your page.
+rel="noreferrer" prevents the new page from knowing where the visitor came from (i.e., it hides your blog's URL).

But there's a security risk if you use target="_blank" alone — and that’s where rel="noopener noreferrer ugc" comes in:

+rel="noopener" prevents the newly opened page from accessing your page via JavaScript.

Without it, a malicious page could redirect or modify your original page — a trick known as tabnabbing.

+rel="ugc" (New!) says Google that the link was made by a user, and not by the QuizMaster; so if somebody links to bad pages without using rel="ugc", JetPunk might get shadowbanned by 'promoting spam', since Google would've no way to know it was Jeremy.

This protects your blog's privacy and can reduce spam or tracking, so we use all of them since nothing avoids so.

Here's a table section that I have previously done:

I recommend using it along with <title></title>, which are in section 5.11, and I explain how to use them.

Those 2 HTML attributes that might be useful on certain occasions: colspan:"" lets an individual cell cover several columns, and rowspan:"" lets more than 2 rows.

NOTE: If you usually have 3 cells per row and use e.g. colspan="2" in a cell, delete the 2nd cell and let the 3rd be, because the table might collapse. This is especially dangerous with rowspan="".

E.G: ...<tr>

  <th colspan="2">Full name</th>

  <th>Age</th>

</tr>

</head>

<body>

<tr>

  <td>Peter</td>

  <td>Parker</td>

  <td rowspan="2">25</td>

</tr>...

This is how it does result:

<caption> lets you give the table a title. (Use it with style="text-align: center;") It'd look like this:

<caption>Reasons for fire Peter</caption>

<table...

This is a pro tip to make your tables easier to understand, especially for screen readers used by visually impaired people, and also for keeping your HTML clean.

You use scope="" inside <th> tags to tell the browser what each header refers to:

<th scope="col">Name</th>

<th scope="row">Employee 1</th>

scope="col" → This header applies to the whole column

scope="row" → This header applies to the whole row

What does this help with?

It tells the computer:

"Okay, this cell with the value '4' belongs to the row 'Peter' and the column 'Labour days taken since 2007'."

Without scope, the browser doesn't always know how to link data to headers.
With scope, it becomes much smarter and more accessible.

The CSS attribute border-radius: makes the table borders rounder, the implicit value is 0, and when a higher the indicated pixel value is indicated, the table will seem rounder!

The problem is when border-collapse: collapse; is present, since it is used to break the table when border-radius: is present too. So we must use the <div> tag before <table> and </div> after </table>. Then, with those tags in their place, now you can use the style="border-radius: ...px" inside <div>!

If you are experiencing that the data is surpassing the table's limits, use the CSS attribute overflow: hidden (inside style="")

This is a complex theme, so the example is kind of big:

<div style="overflow: hidden; border-radius: 12px; border: 1px solid gray; display: inline-block;">

<table cellpadding="10" cellspacing="0" style="border-collapse: separate; border-spacing: 0; width: 100%;">

    <thead>

      <tr style="background-color: #444; color: white;">

        <th style="border-right: 1px solid #ccc;" scope="col">Name</th>

        <th scope="col">Incidents</th>

      </tr>

    </thead>

    <tbody>

      <tr style="background-color: #fff;">

        <td style="border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;">Peter</td>

        <td style="border-bottom: 1px solid #ccc;">He might stop robbing our tap water</td>

      </tr>

      <tr style="background-color: #f9f9f9;">

        <td style="border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;">Sarah</td>

        <td style="border-bottom: 1px solid #ccc;">She almost burnt all down</td>

      </tr>

      <tr style="background-color: #fff;">

        <td style="border-right: 1px solid #ccc;">Guillermo</td>

        <td>We don't understand him :P</td>

      </tr>

    </tbody>

  </table>

</div>

+This makes the table a DIV; then we can use border-radius: 12px;

+bordeg-collapse: separate; is necessary for the code; else border-radius won't work.

+I'm using the CSS attribute overflow: hidden, which helps to avoid overlapping the text and the grid.

+style="border-right: 1px solid #ccc;" is making the inner grid, which isn't implicit with border-radius

To make a bold letter, you have 2 easy options: <b>TEXT</b> or <strong>TEXT</strong>

What's the difference?? I don't know, but ChatGPT does:

Okey, here it is the table of them all, including visual, semantic and CSS styles:

These codes, called 'entities', are interpreted as text when entered inside the <th></th> or <tr></tr>:

Therefore, HTML entities are a great way to avoid code conflicts when you need to show symbols that HTML usually interprets! (like an <a>)

&nbsp; is interpreted as a space, useful when you need more than 1 space

(2 or more spaces get suppressed into 1)

&reg; is interpreted as a ®

&copy; is interpreted as a ©

&trade; is interpreted as a ™

&bull; is interpreted as • (for lists)

&gt;    is interpreted as >

&lt;  is interpreted as <

&larr;    is interpreted as  ←

&rarr;  is interpreted as →

&euro; is interpreted as €

&sect; is interpreted as §

&pi; is interpreted as π

&amp; is interpreted as &

The title attribute lets you add little pop-up tooltips that appear when you remain unmoved the mouse over an element, like a cell in your table.

It’s a simple way to give extra explanations, definitions, or clarifications without cluttering your table.

  <td title="Chief Executive Officer">CEO</td>

When someone stops the mouse over “CEO”, they’ll see a small pop-up showing “Chief Executive Officer”.

+Clarify abbreviations or acronyms.

+Add pronunciation guides or extra context.

+Help users understand your data better without taking up space.

+Improve accessibility by providing hints for all users.

We already know overflow: attribute by eighth point, but this is different:

-Although you are not using border-radius in your table, you should use it when your table is BIG. USES:

 +This allows a horizontal scrollbar to appear if the table is wider than its container.

 +It's a simple trick to prevent your table from breaking on small screens.

 +It also prevents elements from getting distorted or becoming unreadable.

Let's be fast:

<style>

...

tr:hover{

background-color: #eee !important; cursor: pointer;

}

td:hover{

background-color: #ddd; cursor: pointer;

}

...

</style>

This changes the hovered td to get it darker, and the row will get less darkened.

Why did I use !important? Since I wanna say the navigator "hey dude, the bgcolor of the rows is important, but when hovered, the blue-ish color is even more important should override everything else!"

I recommend using blue-ish for the hover shadows! #f0f5f9, #e1ecf4, #c9ddee and #a2c1e0.

Sadly, the support for col:hover is bad, so to highlight the column, you must use other methods.

If you want to help the programming community, report this lack of support here:

-Edge, Google, and Brave (Chromium): Issues Chromium.com

-Firefox (Mozilla): Bugzilla.com

-Safari: WebKit.com

<style> is a tag you can place in the <head> of your HTML that allows you to define CSS rules. This way, instead of writing style="padding: 6px; font-weight: bold;" 84 times... You do it once:

<style>

th {

font-weight: bold;

background-color: #444;

color: white;

}

td, th{padding: 6px 4px}

tr:nth-child(even) {background-color: #f9f9f9;}

tr:nth-child(odd) {background-color: #ffffff;}

</style>

<table...>...

What is this?

This is the best way of using <style>, let me explain:

+We opened <style> before anything and we opened {}, and visual or layout style inside {} will be applied to the tag we would like; and we indicated th, tr:nth-child(odd) and tr:nth-child(even) tags.

+We used a th, td{ , so all the CSS thing indicated there will modify those two tags.

++I'm not sure what "tr_nth-child" means, but all the selected styles would affect odd or even rows, great for alternating row colors!

+Then we put in a line things as background-color: padding: font-weight: bold (makes any text of the tag go bold) and color:

+And after we closed with </style> we can finally open <table> or <div>

Why use it?

+Your code becomes way more organized, easy to edit, and lightweight. Plus, it's like giving your table a proper outfit instead of taping things on it.

Where do I put it?

+Right inside the <head> tag of your page, Jetpunk may not allow it, so right at the top of all works!

Can I combine it with inline style?

+Yes, but try not to. Reserve inline style for tiny one-off tweaks. If you're repeating the same thing over and over, use <style>.

May I put all visual characteristics inside <style>?

+Yes, that's what you should do! Use the CSS equivalents of all you're able to do.

If you find something like ' cellspacing="10px" ', look for a CSS outline form of it, like ' border-collapse: separate; border-spacing: 10px; '

However, border="", <title></title> or <b></b> are also visual, yet you usually don't put them style=""

Gold rule: Won't work inside style="", won't work inside <style></style>.

+You can replace <b> for (font-weight:bold;), <i> for (font-style: italic;), <u> for (text-decoration: underline;) and <del> for (text-decoration: line-through;).Those aren't tags, but CSS attributes so <style> does accept them.

+After writing lots of code, save it and check it all in preview mode. Don't rely on HTML blindly!

+Remember to close properly each <td>, <th>, and <tr>; and also <thead>, <tbody>, <table>, <tfoot> and <div>! One single bad-closed tag can ruin all your layout :(

+Use border-collapse: separate and overflow: hidden, along with border-radius: else all will blow!

+Use &nbsp; for empty cells instead of leaving nothing, some computers can't process that!

+Do not abuse <title>, when using them constantly, it won't surprise you to find them!

+If the table blown up, is not probably 'cause you're bad at programming: You could have had a typo ))(<tabl>, stile=""), you closed un-properly (<tr><th>), you forgot a bar or a semicolon (<td style= backgroundcolor: blue">When was a fire, Peter took the office's computers and ran away!<td>) or you have trash lines! (<td stjyle=jld>Andromeda</td>)

+You are not using <thead> or <tbody> or <tfoot>, this will surely send you to hell.

+Use overflow-x: auto; if your table is BIG, then if all overflows, this characteristic can avoid that and create a horizontal scroll bar

+Related to the anterior point, create two DIVs when using both overflow, then you can separate them and avoid implosions! (Like when Peter)

<div style="overflow-x: auto;">

<div style="overflow: hidden; border-radius: 16px; border-collapse: separate">

<table border="1" style="width: 100%; cellspacing:0px; cellspadding: 10">

<thead>...

+I would recommend intercalating colors of the cells: Even rows would have #FFF and odd ones would have #f9f9f9. That is highly visually pleasing and improves readability.

+Writing all in one line. Don’t cram your whole table into one massive line of code. It's not faster, it's unreadable. Your future self will hate you.

+Using <br> for layout. That's not how tables work! If you're forcing spacing with <br><br><br>, consider fixing your CSS or padding instead.

+Mixing <div>'s and <table>'s randomly. <div> is not a magic fix-it box. You can’t just throw <div> around a broken <table> and expect a miracle. I talked about it just for curvy borders!

+Putting CSS inside every element. Inline styles are okay at first, but if your <td> has 10 different style= attributes, maybe it's time to consider using <style> or classes.

+Forgetting accessibility. Add at least scope="col" in your <th> and avoid vague link text like “click here”. A screen reader reads code, not your esoteric feelings!.

+Thinking that white = clean. Overusing a white background with no borders, shadows, or contrast makes your table look like a lost Word document. Give it some life!

+No testing on small screens. You made a gorgeous wide table… and it explodes on phones. Always preview how it looks in mobile view, adding overflow-x: auto is not that hard!!

+Getting stuck on perfection. It's okay if it’s not pixel-perfect. You’re learning, and some of your "errors" might be Jetpunk's fault! (like disappeared lower corners while using border-radius!)

I do thank anybody who has read to this point, and therefore, I hope my blog has been helpful to any curious reader. Blessings to y'all!