Column name in html table

How To Create Tables in HTML

A table is a set of data organized by rows and columns. Tables are useful for displaying connections between data types, such as products and their cost, employment and dates employed, or flights and departure times. In this tutorial, you will create a table using HTML, customize it by adding a desired amount of rows and columns, and add row and column headings to make your table easier to read.

Prerequisites

• Familiarity with HTML. If you are not familiar with HTML or need a refresher, you can review the first three tutorials of our How To Build a Website With HTML tutorial series.
• An index.html file to practice creating HTML tables. If you do not know how to create an index.html file, please follow the instructions in our brief tutorial How To Set Up Your HTML Project.

Fundamentals of HTML tables

As an example, here is a table that has two rows and three columns:

table> tr> td>Column 1td> td>Column 2td> td>Column 3td> tr> tr> td>Column 1td> td>Column 2td> td>Column 3td> tr> table> 

To explore how HTML tables works in practice, paste the code snippet above into the index.html file or other html file you are using for this tutorial.

Save and reload the file in the browser to check your results. (For instructions on loading the file in your browser, please visit this step of our tutorial on HTML Elements.)

Your webpage should now have a table with three columns and two rows:

table> tr> td>Column 1td> td>Column 2td> td>Column 3td> tr> tr> td>Column 1td> td>Column 2td> td>Column 3td> tr> tr> td>Column 1td> td>Column 2td> td>Column 3td> tr> table> 

Save your results and check them in your browser. You should receive something like this:

table> tr> td>Column 1td> td>Column 2td> td>Column 3td> td>Column 4td> tr> tr> td>Column 1td> td>Column 2td> td>Column 3td> td>Column 4 td> tr> tr> td>Column 1td> td>Column 2td> td>Column 3td> td>Column 4td> tr> table> 

Save your results and check them in your browser. Your webpage should display a table with three rows and four columns:

Adding a Border To a Table

table border="1"> tr> td>Row 1td> td>Row 2td> td>Row 3td> tr> tr> td>Row 1td> td>Row 2td> td>Row 3td> tr> table> 

Add the highlighted border attribute to your table and checking your results in the browser. (You can clear your index.html file and paste in the HTML code snippet above.) Save your file and load it in the browser. Your table should now have a border surrounding each of your rows and columns like this:

Adding Headings To Rows and Columns

Headings can be added to rows and columns to make tables easier to read. Table headings are automatically styled with bold and centered text to visually distinguish them from table data. Headings also make tables more accessible as they help individuals using screen readers navigate table data.

Clear the index.html file and add a row of column headings with the following code snippet:

table border="1"> tr> th>th> th>Column Header 1th> th>Column Header 2th> th>Column Header 3th> tr> table> 

Save the index.html file and reload it in your browser. You should receive something like this:

Your webpage should display a single row of column headers. Note that the first column header is empty. You may add a column header here if you like.

table border="1"> tr> th>th> th>Column Header 1th> th>Column Header 2th> th>Column Header 3th> tr> tr> th>Row Header 1th> td>Datatd> td>Datatd> td>Datatd> tr> tr> th>Row Header 2th> td>Datatd> td>Datatd> td>Datatd> tr> tr> th>Row Header 3th> td>Datatd> td>Datatd> td>Datatd> tr> table> 

Save the index.html file and reload it in your browser. You should receive something like this:

You should now have a table with with three column headings and three row headings.

Conclusion

In this tutorial, you have created an HTML table, added additional rows and columns, and created headings for rows and columns.

If you are interested in learning more about HTML, you can check our our tutorial series How To Build a Website With HTML. To learn about how to use CSS to style HTML elements (including tables), please visit our tutorial series How To Build a Website With CSS.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Источник

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico

Table Cells

Each table cell is defined by a

and a

tag.

Everything between

and

are the content of the table cell.

Example

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a

and ends with a

tag.

Example

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

th stands for table header.

Example

Let the first row be table header cells:

By default, the text in elements are bold and centered, but you can change that with CSS.

HTML Exercises

HTML Table Tags

Tag	Description
	Defines a table
	Defines a header cell in a table
	Defines a row in a table
	Defines a cell in a table
	Defines a table caption
	Specifies a group of one or more columns in a table for formatting
	Specifies column properties for each column within a element
	Groups the header content in a table
	Groups the body content in a table
	Groups the footer content in a table

For a complete list of all available HTML tags, visit our HTML Tag Reference.

LEARN MORE

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

: The Table Column element

The HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a element.

Try it

allows styling columns using CSS, but only a few properties will have an effect on the column (see the CSS 2.1 specification for a list).

Attributes

This element includes the global attributes.

This attribute contains a positive integer indicating the number of consecutive columns the element spans. If not present, its default value is 1 .

Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:

• left , aligning the content to the left of the cell
• center , centering the content in the cell
• right , aligning the content to the right of the cell
• justify , inserting spaces into the textual content so that the content is justified in the cell

Note: To achieve the same effect as the left , center , right or justify values, do not try to set the text-align property on a selector giving a element. Because elements are not descendant of the element, they won’t inherit it.

If the table doesn’t use a colspan attribute, use the td:nth-child(an+b) CSS selector. Set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) < text-align: right; >to right-align the second column.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n] , though this is not trivial.

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a ‘ # ‘. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

This attribute sets the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char , this attribute is ignored.

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:

• baseline , which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom .
• bottom , which will put the text as close to the bottom of the cell as it is possible;
• middle , which will center the text in the cell;
• and top , which will put the text as close to the top of the cell as it is possible.

Note: Do not try to set the vertical-align property on a selector giving a element. Because elements are not descendant of the element, they won’t inherit it.

If the table doesn’t use a colspan attribute, use the td:nth-child(an+b) CSS selector where ‘a’ is the total number of the columns in the table and ‘b’ is the ordinal position of the column in the table. Only after this selector the vertical-align property can be used.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n] , though this is not trivial.

This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form 0* , which means that the width of each column in the group should be the minimum width necessary to hold the column’s contents. Relative widths such as 5* also can be used.

Examples

Technical summary

Content categories	None.
Permitted content	None; it is a void element.
Tag omission	It must have start tag, but must not have an end tag.
Permitted parents	only, though it can be implicitly defined as its start tag is not mandatory. The must not have a span attribute.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLTableColElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS properties and pseudo-classes that may be specially useful to style the element:
  • the width property to control the width of the column;
  • the :nth-child pseudo-class to set the alignment on the cells of the column;
  • the text-align property to align all cells content on the same character, like ‘.’.

  Found a content problem with this page?

  This page was last modified on Apr 13, 2023 by MDN contributors.

  Your blueprint for a better internet.

  Источник

  Читайте также:  Java public class in one file