A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.
- Tables are useful for various tasks such as presenting text information and numerical data.
- Tables can be used to compare two or more items in tabular form layout.
- Tables are used to create databases.
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.
Example:
<!DOCTYPE html> < html > < body > < table style = "width:100%" > < tr > < th >Firstname</ th > < th >Lastname</ th > < th >Age</ th > </ tr > < tr > < td >Priya</ td > < td >Sharma</ td > < td >24</ td > </ tr > < tr > < td >Arun</ td > < td >Singh</ td > < td >32</ td > </ tr > < tr > < td >Sam</ td > < td >Watson</ td > < td >41</ td > </ tr > </ table > </ body > </ html > |
Output:
Important Table options in HTML:
- Adding a border to a HTML Table : A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.
Example:
<!DOCTYPE html>
<
html
>
<
body
>
<
style
>
table, th, td {
border: 1px solid black;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output :
-
Adding Collapsed Borders in a HTML Table : For borders to collapse into one border, add the CSS border-collapse property.
Example:
<!DOCTYPE html>
<
html
>
<
body
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding Cell Padding in a HTML Table : Cell padding specifies the space between the cell content and its borders.If we do not specify a padding, the table cells will be displayed without padding.
Example:<!DOCTYPE html>
<
html
>
<
body
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding Left Align Headings in a HTML Table : By default the table headings are bold and centered. To left-align the table headings,we must use the CSS text-align property.
Example:
<
html
>
<
body
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
text-align: left;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding Border Spacing in a HTML Table : Border spacing specifies the space between the cells. To set the border spacing for a table,we must use the CSS border-spacing property.
Example:<
html
>
<
body
>
<
style
>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 5px;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding Cells that Span Many Columns in HTMl Tables : To make a cell span more than one column, we must use the colspan attribute.
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</
style
>
</
head
>
<
body
>
<
h2
>Cell that spans two columns:</
h2
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Name</
th
>
<
th
colspan
=
"2"
>Telephone</
th
>
</
tr
>
<
tr
>
<
td
>Vikas Rawat</
td
>
<
td
>9125577854</
td
>
<
td
>8565557785</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding Cells that Span Many Rows in HTML Tables : To make a cell span more than one row,we must use the rowspan attribute:
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</
style
>
</
head
>
<
body
>
<
h2
>Cell that spans two rows:</
h2
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Name:</
th
>
<
td
>Vikas Rawat</
td
>
</
tr
>
<
tr
>
<
th
rowspan
=
"2"
>Telephone:</
th
>
<
td
>9125577854</
td
>
</
tr
>
<
tr
>
<
td
>8565557785</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding a Caption in a HTML Table : To add a caption to a table, we must use the “caption” tag.
Example:<
html
>
<
body
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
text-align: left;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
caption
>DETAILS</
caption
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Adding a Background Colour To a Table in HTML : A color can be added as a background in HTML table using the “background-color” option.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
</
style
>
</
head
>
<
body
>
<
table
style
=
"width:100%"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
<
br
/>
<
br
/>
<
table
id
=
"t01"
>
<
tr
>
<
th
>Firstname</
th
>
<
th
>Lastname</
th
>
<
th
>Age</
th
>
</
tr
>
<
tr
>
<
td
>Priya</
td
>
<
td
>Sharma</
td
>
<
td
>24</
td
>
</
tr
>
<
tr
>
<
td
>Arun</
td
>
<
td
>Singh</
td
>
<
td
>32</
td
>
</
tr
>
<
tr
>
<
td
>Sam</
td
>
<
td
>Watson</
td
>
<
td
>41</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
- Creating Nested Tables in HTML: Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are visually interesting and have the potential of introducing errors.
Example:<
html
>
<
body
>
<
table
border
=
5
bordercolor
=
black
>
<
tr
>
<
td
>
Fisrt Column of Outer Table
</
td
>
<
td
>
<
table
border
=
5
bordercolor
=
grey
>
<
tr
>
<
td
>
First row of Inner Table
</
td
>
</
tr
>
<
tr
>
<
td
>
Second row of Inner Table
</
td
>
</
tr
>
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Output:
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
leave a comment
0 Comments