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:
