Home > Question Answer > How to highlight Table text in html

How to highlight Table text in html

How to highlight text of a table box in html ?

Question – I have added a table in one of the HTML pages and I would like to highlight some of the row elements in the Table. How can I do that ? How can I highlight the individual boxes of the Table ?

Mira Nair from India asked this question.

Answer – Thank you for contacting StarredReviews for your question. Highlighting the text of the background of a Table content is no different from highlighting the normal text. For example take a look at the following highlighted text.

This is a highlighted text.

The code corresponding to this text is

<span style="background-color: rgb(255, 255, 0);">This is a highlighted text.</span>

Notice that rgb(255, 255, 0) corresponds to the yellow color ( Red + Green = Yellow). You can use whatever color you want to highlight a text.

You can do the same thing for a text in the box of a Table.

As an example take a look at the following table

Table : How to Highlight Table Text

Feature Atom N550 Atom N570
Core Frequency 1.50 GHz 1.66 GHz
No. Of Cores 2 ( 4 Hyperthreads) 2 ( 4 Hyperthreads)

The corresponding code is as follows

<strong>Table :  How to Highlight Table Text</strong>
<table border="1">
<tbody>
<tr bgcolor="000099">
<td><strong> <span style="color: white;">Feature </span></strong></td>
<td><strong> <span style="color: white;">Atom N550</span></strong></td>
<td><strong> <span style="color: white;">Atom N570</span></strong></td>
</tr>
<tr bgcolor="ghostwhite">
<td><strong> Core Frequency</strong></td>
<td><span style="background-color: #ffff00;">1.50 GHz</span></td>
<td><span style="background-color: #ffff00;">1.66 GHz </span></td>
</tr>
<tr bgcolor="gainsboro">
<td><strong> No. Of Cores</strong></td>
<td>2 ( 4 Hyperthreads)</td>
<td>2 ( 4 Hyperthreads)</td>
</tr>
</tbody>
</table>

Alternatively you may also set the background of a box of Table as follows.

Table : How to highlight Table Text

Feature Atom N550 Atom N570
Core Frequency 1.50 GHz 1.66 GHz
No. Of Cores 2 ( 4 Hyperthreads) 2 ( 4 Hyperthreads)

The corresponding code is as follows. We make use of the code like <td bgcolor=”ffff0000″>  to do the same.

 

<strong>Table :  How to highlight Table Text </strong>
<table border=”1″>
<tbody>
<tr bgcolor=”000099″>
<td><strong> <span style=”color: white;”>Feature </span></strong></td>
<td><strong> <span style=”color: white;”>Atom N550</span></strong></td>
<td><strong> <span style=”color: white;”>Atom N570</span></strong></td>
</tr>
<tr bgcolor=”ghostwhite”>
<td><strong> Core Frequency</strong></td>
<td bgcolor=”ffff0000″>1.50 GHz</td>
<td bgcolor=”ffff0000″>1.66 GHz</td>
</tr>
<tr bgcolor=”gainsboro”>
<td><strong> No. Of Cores</strong></td>
<td>2 ( 4 Hyperthreads)</td>
<td>2 ( 4 Hyperthreads)</td>
</tr>
</tbody>
</table>

Categories: Question Answer Tags:
  1. Abdul
    May 25th, 2011 at 21:14 | #1

    Acn you also explain how to highlight the complete row of a Table ? How about and example with darker background and a lighter text in the foreground ?

  2. Joachim
    June 20th, 2011 at 06:43 | #2

    Dear Abdul,

    Highlighting the complete row of a table is quite straightforward if using styles. You can use the style attribute within the <tr> element defining the row of a table. An example is shown below. For each of the two rows I defined a different background colour and a different text colour. The SPAN attribute is not needed. You can look up the use of styles and style sheets at http://www.w3.org/MarkUp/Guide/Style

    Row 1 Column 1
    Row 1 Column 2
    Row 1 Column 3

    Row 2 Column 1
    Row 2 Column 2
    Row 3 Column 3

    The corresponding code is
    <table border=”1″>
    <tbody>
    <tr style=”BACKGROUND-COLOR: black; COLOR: white”>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
    </tr>
    <tr style=”BACKGROUND-COLOR: blue; COLOR: silver”>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 3 Column 3</td>
    </tr>
    </tbody>
    </table>

  3. Joachim
    June 20th, 2011 at 07:14 | #3

    Dear Mira Nair,

    Highlighting an individual cell of a table can be done by using the style attribute with the element <td> defining the cell. The SPAN attribute is not necessary, in my opnion the SPAN attribute makes things just more complicated. An example is shown below. You can also combine this with defining a specific style for an entire row. The individual cell will then be the exception within the row and thus highlighted. You can look up the use of styles and style sheets at http://www.w3.org/MarkUp/Guide/Style. It will be even easier if you use an external style sheet in which you define CLASSES for use with the CLASS attribute in HTML elements.

    Row 1 Column 1
    Row 1 Column 2
    Row 1 Column 3

    Row 2 Column 1
    Row 2 Column 2
    Row 3 Column 3

    The corresponding code is
    <table border=”1″>
    <tbody>
    <tr>
    <td>Row 1 Column 1</td>
    <td style=”BACKGROUND-COLOR: black; COLOR: white”>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
    </tr>
    <tr>
    <td style=”BACKGROUND-COLOR: blue; COLOR: silver”>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 3 Column 3</td>
    </tr>
    </tbody>
    </table>