How to create a table in HTML (with images)

Table of contents:

How to create a table in HTML (with images)
How to create a table in HTML (with images)
Anonim

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

Create a Table in HTML Step 1

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 (

    Windowsstart

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

  • under macOS X: open Spotlight (

    Macspotlight

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

Create a Table in HTML Step 2

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

Create a Table in HTML Step 3

Step 3. Type

and press Entrance.

This tag defines a new row in an HTML table.

Create a Table in HTML Step 4

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.

Create a Table in HTML Step 5

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

Create a Table in HTML Step 6

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.

Create a Table in HTML Step 7

Step 7. Type again

, then press the Entrance.

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

.

Create a Table in HTML Step 8

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.

Create a Table in HTML Step 9

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.

Create a Table in HTML Step 10

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.

Create a Table in HTML Step 11

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.

Create a Table in HTML Step 12

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
Create a Table in HTML Step 13

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

Create a Table in HTML Step 14

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.

Create a Table in HTML Step 15

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.
Create a Table in HTML Step 16

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.

Popular by topic