Html table head left

CSS Style Tables

This article is created to cover multiple examples that shows how to design a table using CSS. Let’s start with border around the table.

Create a Border around a Table using CSS

DOCTYPE html> html> head> style> table style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Marilyntd> td>Santa Monicatd> tr> tr> td>Gigitd> td>Malibutd> tr> table> body> html>

Note — The border property creates a border around an element.

Create a Border around all Table Headings using CSS

DOCTYPE html> html> head> style> th style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Marilyntd> td>Santa Monicatd> tr> tr> td>Gigitd> td>Malibutd> tr> table> body> html>

In similar way, to create a border around all table data, use following CSS code:

CSS Table Style — Create Borders

DOCTYPE html> html> head> style> table, th, td style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Marilyntd> td>Santa Monicatd> tr> tr> td>Gigitd> td>Malibutd> tr> table> body> html>

Now with following CSS code:

And with following CSS code:

Note — The border-collapse property collapse the table border into a single border.

Create Padding to Table Cells

DOCTYPE html> html> head> style> table, th, td style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Marilyntd> td>Santa Monicatd> tr> tr> td>Gigitd> td>Malibutd> tr> table> body> html>

Note — The padding property creates gap between the border and the content of specified element.

Align Table Heading to Left using CSS

To align table heading to left, use following CSS code:

DOCTYPE html> html> head> style> table, th, td table.mytb th style> head> body> h2>Without th h2> table> tr> th>Nameth> th>Cityth> tr> tr> td>Natalia Nikolaevna Zakharenkotd> td>Vancouvertd> tr> tr> td>Gigitd> td>Malibutd> tr> table> h2>With th h2> table class="mytb"> tr> th>Nameth> th>Cityth> tr> tr> td>Natalia Nikolaevna Zakharenkotd> td>Vancouvertd> tr> tr> td>Gigitd> td>Malibutd> tr> table> body> html>

Without th
With th

Note — The text-align property aligns the text horizontally.

Create Line Between Table Rows (Horizontal Divider) using CSS

To create a line between all table rows using CSS, use following CSS code:

DOCTYPE html> html> head> style> th, td th style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Natalia Nikolaevna Zakharenkotd> td>Vancouvertd> tr> tr> td>Gigitd> td>Malibutd> tr> table> body> html>

If I’m not wrong, this one looks simple and elegant. But web designing is sometime subjective, as it depends on person to person.

Create Striped Table using CSS

To create a striped table, use following CSS code:

The color is your choice. For example:

DOCTYPE html> html> head> style> th, td th tr:nth-child(even) style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Natalia Nikolaevna Zakharenkotd> td>Vancouvertd> tr> tr> td>Gigitd> td>Malibutd> tr> tr> td>Joaquin Rafael Bottomtd> td>Halifaxtd> tr> tr> td>Gary Edward Keillortd> td>Liverpooltd> tr> table> body> html>

Name	City
Natalia Nikolaevna Zakharenko	Vancouver
Gigi	Malibu
Joaquin Rafael Bottom	Halifax
Gary Edward Keillor	Liverpool

Note — Use odd in place of even to select first row, then third row, then fifth, and so on.

To change the background of table heading content, use following CSS code:

The color is your choice. For example:

DOCTYPE html> html> head> style> th, td th tr:nth-child(even) style> head> body> table> tr> th>Nameth> th>Cityth> tr> tr> td>Natalia Nikolaevna Zakharenkotd> td>Vancouvertd> tr> tr> td>Gigitd> td>Malibutd> tr> tr> td>Joaquin Rafael Bottomtd> td>Halifaxtd> tr> tr> td>Gary Edward Keillortd> td>Liverpooltd> tr> table> body> html>

Name	City
Natalia Nikolaevna Zakharenko	Vancouver
Gigi	Malibu
Joaquin Rafael Bottom	Halifax
Gary Edward Keillor	Liverpool

Create Full Width Table using CSS

To create or expand the table to acquire the full width of the current window, use following CSS code:

I’m going to add this code in previous example. Now I’ve got the output that is exactly same as:

Name	City
Natalia Nikolaevna Zakharenko	Vancouver
Gigi	Malibu
Joaquin Rafael Bottom	Halifax
Gary Edward Keillor	Liverpool

Here are the list of some CSS properties that can be used to define the design and layout of a table:

Liked this article? Share it!

Источник

: The Table Head element

The HTML element defines a set of rows defining the head of the columns of the table.

Try it

Attributes

This element includes the global attributes.

Deprecated attributes

This enumerated attribute specifies how horizontal alignment of each 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
• char , aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.

If this attribute is not set, the left value is assumed.

Warning: Do not use this attribute as it is obsolete (not supported) in the latest standard.

This attribute defines the background color of each column cell. It accepts a 6-digit hexadecimal color or a named color. Alpha transparency is not supported.

Note: Do not use this attribute, as it is non-standard. The thead element should be styled using the CSS background-color property, which can be applied to any element, including the thead , , and elements.

This attribute is used to set 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.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.

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

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.

This attribute specifies the vertical alignment of the text within each row of cells of the table header. 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;
• top , which will put the text as close to the top of the cell as it is possible.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS vertical-align property on it.

Examples

Technical summary

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Other table-related HTML Elements: , , , , , , , , ;
• CSS properties and pseudo-classes that may be specially useful to style the element:
  • 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.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  HTML Table Headers

  HTML tables can have headers for each column or row, or for many columns/rows.

  EMIL	TOBIAS	LINUS

  8:00
  9:00
  10:00
  11:00
  12:00
  13:00

  MON	TUE	WED	THU	FRI
  8:00
  9:00
  10:00
  11:00
  12:00

  DECEMBER

  HTML Table Headers

  Table headers are defined with th elements. Each th element represents a table cell.

  Example

  Vertical Table Headers

  To use the first column as table headers, define the first cell in each row as a element:

  Example

  Align Table Headers

  By default, table headers are bold and centered:

  Firstname	Lastname	Age
  Jill	Smith	50
  Eve	Jackson	94

  To left-align the table headers, use the CSS text-align property:

  Example

  Header for Multiple Columns

  You can have a header that spans over two or more columns.

  Name		Age
  Jill	Smith	50
  Eve	Jackson	94

  To do this, use the colspan attribute on the element:

  Example

  You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

  Table Caption

  You can add a caption that serves as a heading for the entire table.

  Monthly savings

  Month	Savings
  January	$100
  February	$50

  To add a caption to a table, use the tag:

  Example

  HTML Exercises

  

  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.

  Источник