Example of HTML caption Tag

CSS Tables

Some of the CSS properties are widely used to apply style on HTML tables. Each of them is described below.

In this chapter, we will talk about how to give styles to tables. We can change the color of headings and rows that we want.

Table Styling Properties

Here are CSS properties that we use for applying a style to the table. The background-color and color properties set the background color and the color of the text, respectively. The border-collapse property makes the table borders collapse. The text-align property sets the text position. Also, we should use the height, width and padding properties for styling.

Example of styling a table:

html> html> head> title>Title of the document title> style> table < width: 100%; border-collapse: collapse; > table, th, td < border: 1px solid black; > thead < background-color: #1c87c9; color: #ffffff; > th < text-align: center; height: 50px; > tbody tr:nth-child(odd) < background: #ffffff; > tbody tr:nth-child(even) < background: #f4f4f4; > style> head> body> table> thead> tr> th>Heading th> th>Heading th> tr> thead> tbody> tr> td>Some text td> td>Some text td> tr> tr> td>Some text td> td>Some text td> tr> tr> td>Some text td> td>Some text td> tr> tr> td>Some text td> td>Some text td> tr> tbody> table> body> html>

Result

Let’s explain the above code.

As you see our table has 2 parts: the first is the part where we have written headings, which is our part and the second part is the part where we have written some text. The table has black borders, for which we use border property. We can use any color we want as well as we can choose the style of borders.

Table color

As you see the part of our table is blue and wherever we write some text is in white. For the blue background, we use the background-color property, and for the white text, we use the color property. The other texts are written with black.

Collapse Borders

The border-collapse property specifies whether the borders of a table are collapsed into a single border or separated.

Table Width and Height

The table also has width and height properties. As you see we use these properties in our style. We use the width property for the whole table and the height property for the headings. We can use these properties with pixels and percents.

Table Text Alignment

Now about the table text alignment. As you know earlier we used the text-align property for the text position. In our example, as you see, we use the text-align property for the heading. For that, we use «text-align: center». You can read our previous chapter to know how to use it.

Table Padding

To control the space between the border and content in a table, use the padding property on and elements:

Horizontal alignment with the text-align property

Example of aligning the content of and elements to the right:

html> html> head> title>Title of the document title> style> table, td, th < border: 1px solid black; > table < border-collapse: collapse; width: 100%; > th, td < text-align: right; > style> head> body> h2>Horizontal alignment example h2> table> tbody> tr> th>Firstname th> th>Lastname th> th>Money th> tr> tr> td>Sherlock td> td>Holmes td> td>$200 td> tr> tr> td>John td> td>Watson td> td>$250 td> tr> tr> td>Mary td> td>Whatson td> td>$500 td> tr> tbody> table> body> html>

Vertical alignment with the vertical align-property

Example of the vertical alignment of elements’ content to bottom:

html> html> head> style> table, td, th < border: 1px solid black; > table < border-collapse: collapse; width: 100%; > td < height: 50px; vertical-align: bottom; text-align: right; padding-right: 10px; > style> head> body> h2>Vertical alignment example h2> table> tr> th>Firstname th> th>Lastname th> th>Money th> tr> tr> td>Sherlock td> td>Holmes td> td>$300 td> tr> tr> td>John td> td>Watson td> td>$250 td> tr> tr> td>Mary td> td>Watson td> td>$500 td> tr> table> body> html>

Horizontal dividers

Example of creating horizontal dividers:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; width: 100%; > th, td < padding: 10px; text-align: left; border-bottom: 1px solid #cccccc; > style> head> body> h2>Horizontal dividers example h2> table> tr> th>Firstname th> th>Lastname th> th>Money th> tr> tr> td>Sherlock td> td>Holmes td> td>$200 td> tr> tr> td>John td> td>Watson td> td>$350 td> tr> tr> td>Mary td> td>Watson td> td>$500 td> tr> table> body> html>

Hoverable tables

Example of creating a hoverable table:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; width: 100%; > tr < background-color: #f5f5f5; > th, td < padding: 15px; text-align: left; border-bottom: 1px solid #ccc; > tr:hover < background-color: #cdcdcd; > style> head> body> h2>Hoverable table example h2> table> tr> th>First Name th> th>Last Name th> th>Money th> tr> tr> td>Sherlock td> td>Holmes td> td>$200 td> tr> tr> td>John td> td>Watson td> td>$350 td> tr> tr> td>Mary td> td>Watson td> td>$500 td> tr> table> body> html>

Zebra-striped table

Using the nth-child() selector and adding the CSS background-color property to the odd (even) table rows, you can create a zebra-striped table.

Example of creating a zebra striped table:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; width: 100%; > th, td < text-align: left; padding: 10px; > tr:nth-child(even) < background-color: #6eeccf; > tr:nth-child(odd) < background-color: #2d7f88; > style> head> body> h2>Striped table example h2> table> tr> th>First name th> th>Last name th> th>Points th> tr> tr> td>Sherlock td> td>Holmes td> td>$250 td> tr> tr> td>John td> td>Watson td> td>$350 td> tr> tr> td>Mary td> td>Watson td> td>$500 td> tr> table> body> html>

Responsive tables

Example of creating a responsive table:

html> html> head> title>Title of the document title> style> div < overflow-x: auto; > table < border-collapse: collapse; width: 100%; > th, td < text-align: left; padding: 8px 5px; > tr:nth-child(even) < background-color: #6eeccf; > tr:nth-child(odd) < background-color: #2d7f88; > style> head> body> h2>Responsive table example h2> div> table> tr> th>First Name th> th>Last Name th> th>Money th> th>Money th> th>Money th> th>Money th> th>Money th> th>Money th> th>Money th> th>Money th> th>Money th> th>Money th> tr> tr> td>Sherlock td> td>Holmes td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> td>$150 td> tr> tr> td>John td> td>Watson td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> td>$350 td> tr> tr> td>Mary td> td>Watson td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> td>$500 td> tr> table> div> body> html>

Источник

Mastering HTML Tables: Complete Guide with Examples and CSS Styling

As a web developer, understanding the basics of HTML tables and how to use them in HTML is essential. HTML tables are a powerful tool for organizing data on web pages. In this blog post, we will cover everything you need to know about HTML tables, including how to create them, style them with CSS, and make them responsive.

The

Here’s an example of how to create a simple HTML table:

 
 
Product
 
Price
 
 
Product 1
 
$10
 
 
Product 2
 
$20
 
 
 

In this example, we have a table with two columns: “Product” and “Price”. The first row is the header row, and the two rows below it are the data rows.

Tabular data and using tables for responsive design

HTML tables allow web authors to arrange data like text, images, links, other tables, etc. HTML tables can be used to create a spreadsheet-like representation of data. Tables can be difficult to read on small screens, so it’s important to consider mobile optimization. Tables can be responsive with the use of media queries.

To make a table responsive, you can wrap it in a

In this example, we have wrapped the table in a

Styling tables with CSS

Tables can be styled with CSS to improve their appearance. Tables can have attributes like border, frames, and rules. Tables can have different types of alignment, such as left, right, and center. Tables can have different types of borders, such as dotted, dashed, and solid.

Here’s an example of how to style a table with CSS:

In this example, we are collapsing the borders of the table, setting the width to 100%, and applying padding and border styles to the table headers and data cells.

Headers and data cells

Tables can include headers and data cells. Each table header is defined with the “th” tag. Each table data cell is defined with the “td” tag. Using semantic HTML tags can improve accessibility and SEO for tables.

Here’s an example of how to use headers and data cells in a table:

 
 
 
Monday
 
Tuesday
 
Wednesday
 
 
 
 
Morning
 
Yoga
 
Running
 
Swimming
 
 
Afternoon
 
Work
 
Work
 
Work
 
 
Evening
 
Dinner
 
Movie
 
Concert
 
 
 
 

In this example, we have used the “scope” attribute to define the scope of the table header. This helps screen readers understand the organization of the table.

Other uses of HTML tables

HTML tables are commonly used to display tabular data like product listings. Tables can be used to display tabular data on websites. Tables can be used to create forms and input fields. Tables can also be used for layout, but it’s generally not recommended.

Additional simple HTML table code samples

In Html as proof, Tables in html

 
 
Cell 1
 
Cell 2
 
Cell 3
 
 
Cell 4
 
Cell 5
 
Cell 6
 
 

In Html , for instance, HTML Tables code sample

Phone numbers
 
 
Name
 
Phone
 
 
 
 
John
 
577854
 
577855
 
 
Jack
 
577856
 
577857
 
 
 
 
 
 
Personal
 
Office
 
 
 

     
User Details
 
 
1.
 
2
 
3
 
 
 
 
10
 
20
 
30
 
 
100
 
200
 
300
 
 
1000
 
2000
 
3000000000
 
 
 
  

Conclusion

HTML tables are a versatile tool for organizing data on web pages. Understanding how to create and style HTML tables is essential for web developers. By using the

tag, ,

, and	elements, and CSS, you can create visually appealing and responsive tables that improve the user experience. Remember to use semantic HTML tags and consider mobile optimization for the best results.

Источник