HTML Table Text

This page contains HTML table text code. This code enables you to format the text inside your HTML tables. For example, you can change the text color, size, style, alignment etc.

Example

In the following example, we use a CSS class to format the table text. We can use child selectors to format the table cells too if required.

In this example, we use the color property to define the text color. We use the font property to define the font weight, style, size, line height, and font family. We apply these properties to various HTML elements including the table, table header, table cells, as well as any hyperlinks within the table. And we use pseudo classes such as a:hover, a:active and a:visited to define the styles for the hyperlinks.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<style>
.myTableText { 
  width: 100%;
  border-collapse: collapse;
  background-color: #98FB98; 
  }
.myTableText td, 
.myTableText th { 
  border: 2px solid #47ae32;
  padding: 5px; 
  }
.myTableText th { 
  font: bold 18px/1.1em Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 4px black; 
  letter-spacing: 0.1em; 
  background-color: #47ae32; 
  color:#98FB98; 
  }
.myTableText td { 
  font: normal 14px/1.5em Goudy, Georgia, serif;
  color: #47ae32; 
  }
.myTableText td a:link { 
  color: #006400;
  text-decoration: none; 
  }
.myTableText td a:visited { 
  color: #006400; 
  }
.myTableText td a:hover { 
  color: #FF4500;
  text-decoration: underline; 
  }
.myTableText td a:active { 
  color: #FF0000; 
  }
</style>

</head>
<body>

<table class="myTableText">
<tr>
<th>Header 1</th><th>Header 2</th>
</tr>
<tr>
<td>Try <a href="/css/">CSS</a></td>
<td>And <a href="/css/css3/">CSS 3</a></td>
</tr>
<tr>
<td>Or <a href="/html/">HTML</a></td>
<td>Or <a href="/sql/tutorial/">SQL</a></td>
</tr>
</table>

</body>
</html>

View Output

Using External Style Sheets

The above example uses embedded style sheets to set the CSS properties. This is because it's easier for demonstration purposes. I strongly encourage you to use an external style sheet whenever possible to set your styles. This can reduce coding time and make your code easier to maintain.

HTML Reference

HTML Tutorial

Free HTML tutorial that explains how to code in HTML.

This tutorial explains what HTML elements and attributes are, and how to use them.

I explain the basics, such as what you need in order to write HTML and how to create your first web page.

I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.

I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial
HTML Tags

Full list of all HTML elements.

This is an alphabetical list of HTML elements, linking to a full page of details for each element.

All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags
CSS Properties

Full list of CSS properties.

Alphabetical list of CSS properties as per the W3C specifications.

CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.

You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties

HTML Table Text

Example

Using External Style Sheets

HTML Reference

HTML Tutorial

HTML Tags

CSS Properties

Related