Html table text size color

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>

Источник

How do I change the font color in an html table?

If you’re trying to change the colour of the text in your select options list, thats not the table text colour that you need to change, have a look at this similar question. stackoverflow.com/questions/15755770/…

5 Answers 5

 
 
 
 
 Basic : $30.00 USD - yearly Sustaining : $60.00 USD - yearly Supporting : $120.00 USD - yearly  
 
 
 
 

Something like this, if want to go old-school.

Sustaining : $60.00 USD - yearly 

Though a more modern approach would be to use a css style:

Sustaining : $60.00 USD - yearly 

There are of course even more general ways to do it.

table td < color:#0000ff; > 
 
 
 
 Basic : $30.00 USD - yearly Sustaining : $60.00 USD - yearly Supporting : $120.00 USD - yearly  
 
 
 
 

if you need to change specific option from the select menu you can do it like this

or you can change them all

    select  
 
 
 
 Basic : $30.00 USD - yearly Sustaining : $60.00 USD - yearly Supporting : $120.00 USD - yearly  
 
 
 
   

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.25.43544

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Table Text

In HTML, table text is the text that is located within an HTML table. Often you will want your table text to appear different to the other text on the page. This page contains table text codes for applying styles to the text within your HTML tables.

To style the text within a table, you use the same CSS properties that you would use in styling any text. The thing to remember is that, you need to know which HTML element to apply the style against. For example, to change the text color across the whole table, use the color property against the tag. But to change the text color in only the table header, you should only apply that property to the element, or alternatively, to each individual tag (or the tag that contains the table headers).

Below are some examples of applying styles against table text in HTML.

Whole Table

This example applies various styles against the text in the whole table. Therefore, I apply the styles against the tag.

Table Row

To change the text style in a whole table row, you can apply the CSS against the tag.

Table Text with CSS Classes

Using CSS classes is a more efficient way of setting your styles. You simply create a class (using a name of your choosing), then apply styles against that class. Then you can refer to that class from anywhere within your HTML document.

Here’s an example of using an embedded style sheet to define the styles of your HTML tables. Note that the styles are set in between the opening and closing tags.

Источник