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>

<!-- CSS -->
<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>

<!-- HTML -->
<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>

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 Table Text

Example

Using External Style Sheets

Related