Creating a Table in HTML

Jump to Section:
0
(0)

HTML Lesson 5: Creating a Table in HTML

Lesson objective: creating and formatting a table in HTML

Creating a table in HTML

Let’s look at the tags for creating a table:

1
2
3
4
5

< table > 
	< tr > 
		< td > contents < / td > 
	< / tr > 
< / table >

Result: Add a border to the table – attribute :
Contents
border

1
2
3
4
5

< table  border = "1" > 
	< tr > 
		< td > contents < / td > 
	< / tr > 
< / table >

Result:

365

Creating a table begins with a tag table (from the English word “table”). The tag tris used to create a row. The row contains cells—the tag td. The table ends with a closing tag./table

365

TABLE tag attributes

alignleft— table to the left;
center– table in the center;
right— table to the right.
width400
50%
bоrdеrwidth
bordercolorframe colors
сеllspacingframe edge width
cellpaddinginternal distance to the frame
bgсоlоr
Color #rrggbb
bасkground
file (table background)
Important: For table header cells, use the <head> tag th instead of td. The browser centers the contents of these cells and makes the font bold.

TR tag attributes are strings

alignleft, center,righthorizontal alignment
valigntop, middle, bottom,baselinevertical alignment
bgcolorcolorbackground
bordercolorcolorborder color

TD or TH tag attributes – cells

alignleft, center,righthorizontal alignment
valigntop, middle, bottom,baselinevertical alignment
widthnumber or percentagecell width
bgcolorcolorbackground color
backgroundfilebackground file
bordercolorcolorborder color
nowrapcauses the text inside the cell to be displayed without breaks, in one continuous line

Important:

  • The tag caption is used to create a table header.
  • The tag is used to group header cells.thead
  • To group the main content of a table, use the tagtbody
  • The tag tfoot defines the bottom of the table.

The table header tag caption can have an attribute that determines the header’s position — align with the following values:
top — header above the table,
bottom — header below the table,
left — header at the top and aligned left,
right — header at the top and aligned right. Unfortunately, not all values ​​work in all browsers.

365

Example: Create a table “skeleton” with all grouping tags

Execution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< table   border = "1" > 
< caption > table < / caption > 
< thead > 
	< tr > 
	< th > Heading 1 < / th >< th > Heading 2 < / th > 
	< / tr > 
< / thead > 
< tbody > 
	< tr > 
	< td > content < / td >< td > content < / td > 
	< / tr > 
< / tbody > 
< tfoot >
...
< / tfoot > 
< / table >

Lab: Create a table using the template. The table must have a header and grouping areas ( thead is the first row of the table, tbody is the second and third rows of the table, and tfoot is the fourth row of the table).

Table with grouping areas
Column 1Column 2Column 3Column 4
Row 2 Cell 1Row2 Cell2Row 2 Cell 3Row 2 Cell 4
Row 3 Cell 1Row 3 Cell 2Row 3 Cell 3Row 3 Cell 4
Row 4 Cell 1Row 4 Cell 2Row 4 Cell 3Row4 Cell4

Merging cells in a table

This is done using two attributes of the td tag: COLSPAN – merging cells horizontally, ROWSPAN – merging cells vertically.

COLSPAN syntax:

365

1
2
3
4
5
6
7
8
9

< table > 
< tr > 
  < td  colspan = "2" >  < / td > 
< / tr > 
< tr > 
  < td >  < / td > 
  < td >  < / td > 
< / tr > 
< / table >

ROWSPAN syntax:

365

1
2
3
4
5
6
7
8
9

< table > 
< tr > 
  < td  rowspan = "2" >  < / td > 
  < td >  < / td > 
< / tr > 
< tr > 
  < td >  < / td > 
< / tr > 
< / table >
Example: Create a table similar to the one in the image. Use cell merging.
365

Execution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< table   border = "1" > 
< caption > Table with merged cells < / caption > 
< tr > 
  < th  rowspan = "2" > < / th > 
  < th  colspan = "2" > Heading 1 < / th > 
< / tr > 
< tr > 
  < th > Heading 1.1 < / th > 
  < th > Heading 1.2 < / th > 
< / tr > 
< tr > 
  < th > Heading 2 < / th > 
  < td > Cell 1 < / td > 
  < td > Cell 2 < / td > 
< / tr > 
< tr > 
  < th > Heading 3 < / th > 
  < td > Cell 3 < / td > 
  < td > Cell 4 < / td > 
< / tr > 
< / table >
Lab #2: Create tables with numbers in their cells, exactly as shown in the example:
365

Cell grouping: COLGROUP

The element colgroup allows you to create groups of columns with the same properties.

Let’s look at an example:

Example: Create a table using a sample
365

Execution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< TABLE  border = "4" > 
< colgroup > 
	< col  span = "2"  width = "30"  style = "background-color: green"  / > 
	< col  width = "60"  style = "background-color: blue"  / > 
< / colgroup > 
< colgroup  style = "background-color:red" > 
	< col  span = 2  width = "120" / > 
< / colgroup > 
< TR > 
< TD > 1-1 < / TD >< TD > 1-2 < / TD >< TD > 1-3 < / TD >< TD > 1-4 < / TD >< TD > 1-5 < / TD > 
< / TR > 
< TR > 
< TD > 2-1 < / TD >< TD > 2-2 < / TD < TD > 2-3 < / TD >< TD > 2-4 < / TD < TD > 2-5 < / TD > 
< / TR > 
< / table >

COLGROUP tag attributes

aligncolumn content alignment

  1. left — left aligned (default)
  2. center – in the center
  3. right – on the right edge

doesn’t work in Firefox

dirdetermines the direction of the characters:

  1. ltr – from left to right
  2. rtl – from right to left

doesn’t work in Firefox

spanThe number of columns to which the design will be applied (default 1)
stylespecifies an inline style sheet
valignvertical alignment in a table cell

  1. bottom – along the bottom edge of the cell
  2. middle — centered in the cell (default)
  3. top – along the top edge of the cell

doesn’t work in Firefox

widthcolumn width

HTML nested tables

Tables with a complex structure are easier to replace with nested tables.

Example: Create nested tables like this:
365

Execution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< TABLE  border = "4"  bgcolor = "yellow" > 
< tr > 
   < td > Table 1 < / td > 
   < td > 
      < TABLE > 
      < tr >   < td > Table 2 < / td >< td > Cell 2-2 < / td >   < / tr > 
      < tr >   < td > Cell 3-2 < / td >< td > Cell 4-2 < / td >  < / tr > 
      < / TABLE > 
   < / td > 
< tr > 
   < td > Cell 3-1 < / td > 
   < td > Cell 4-1 < / td > 
< / tr > 
< / TABLE >

Lab work:365

  • Create a fixed-size table containing cells of the width shown in the figure.
  • Insert a nested table into the bottom left cell
  • Make the background of the nested table cells gray

 

Lab work:365

  • Open the assignment completed in the previous lab
  • Add another nested table to the top cell.
  • Make the background of the nested table cells white

 

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Explore More IT Terms

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Share this term: Facebook X LinkedIn WhatsApp Email
CONTINUE LEARNING Next: HTML Frame Structure →

RELATED ARTICLES

HTML

    HTML and CSS: Definition, Application, and Operating Principles

      HTML and CSS. Layout from Scratch: What to Learn, Where to Learn, and How Long Will It Take?

        Developing a Website from Scratch

          Embedding Video on a Website

            Creating Forms in HTML

              Leave a Reply

              Your email address will not be published. Required fields are marked *

              Powered by
              ►
              Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.
              None
              ►
              Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.
              None
              ►
              Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.
              None
              ►
              Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.
              None
              Powered by
              The cpanel web hosting control panel is priced at per month, while hepsia and directadmin are both completely free.