How to create a table in HTML (with images)

If you are starting to make small programs in HTML, it will come in handy to know how to make tables with a number of columns and rows and even change the appearance of cell borders.

Steps

Part 1 of 2: Create a table in HTML

Step 1. Run a text editor

In Windows, take Notepad and TextEdit in macOS X. To invoke them, if they are already on your hard drive, do the following:

• under Windows: open the menu To start up (

  

  ), then type notepad, then click Notepad in the results;

• under macOS X: open Spotlight (

  

  ), type textedit, then click TextEdit in Best results.

Step 2. Type

and press the key Entrance.

The tag

indicates that you are creating a table and pressing Enter takes you to the next line to configure the table in question.

With HTML, you must validate each line of code by pressing the Enter key, which allows you to enter the next line of code

Step 3. Type

and press Entrance.

This tag defines a new row in an HTML table.

Step 4. Add a column to your table

Type

to define a header cell and therefore a new column. To close this column, type

and press the Enter key.

• Thus, to give a column the heading "Number of dogs", you will have to type

  Number of dogs

  in your text document.

Step 5. Add more columns

If you want 4, 15 or even 100 columns, you just need to add as many tags after each other

contents

as needed.

Columns are created from left to right

Step 6. Type

and press Entrance.

This is the tag that must be typed to indicate that all the columns are created, with their respective headers.

Step 7. Type again

, then press the Entrance.

This command adds a new row to your table. So many lines, so many tags

.

Step 8. Enter data in a cell

To immediately display data (text, number) in a cell, type

, then your data and close the command with the tag

. Finish by pressing Enter.

• For example, to have a cell containing the number 23, you must type
23

in the text editor.

Step 9. Add cells to the table

The number of cells on a single row must equal the number of columns. If your table has three columns, each row will have three cells. Later you will learn how to modify this number.

Step 10. Close the row of cells

To do this, type

and press the Enter key. If you need another row in your table, start over by typing a command that starts with

, validate with the Enter key, enter your different cells, then close the row of cells.

Step 11. Close the table

Under the last line of code, type the following tag:

. During interpretation, the table can be displayed correctly and completely.

Step 12. Check the HTML code for the table

See if all the data is entered and the beacons properly installed and properly closed, as below.

• Day
• Month
• Year
• 4
• March
• 1990
• 27
• July
• 1993

Step 13. Save your file

To do this, use the key combination Control + S (Windows) or Command + S (Mac), give a meaningful name to your text file, then validate by clicking on Save.

Part 2 of 2: Change the look of a table in HTML

Step 1. Expand your table

Replace the tag

at the top of the code by

. There must be a space between "table" and "style".

• Your first line looks like this:

.

• You can, of course, change the percentage. So you can replace

  100 by 50 and you get a table half as wide.

Step 2. Set up the table borders

Create a space at the top of your document, above the tag

, then operate as follows:

• type and validate with Enter;
• type table, th, td {and press Enter;
• type border: 1px solid black; and press the Enter key;
• type border-collapse: collapse; and press Enter. This code is used to obtain cells with common borders;
• type} and press the Enter key;
• type and press enter.

Step 3. Put a title for your table

Create a space just below the tag

, then operate as follows:

• type;
• type the text you want (for example, Birthdays);
• type and press Enter key.

  • The complete code then looks like this:

    Birthdays.

Advice

• If your program is a bit long, it is good to indent on the right pieces of code that belong to the same global tag. Otherwise there are the comment lines.

• To make a word or a passage bold, type the tags and on either side of the word or passage in question. Thus, to bold Number of years (Number of years), you will type:

  Number of years.