Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Create Table With Simple Border In Html 5

Post a Comment
What is the easiest way to get such table as bellow in HTML 5. I have a feeling that my solution (with setting style for every td) is not the best way.

Solution 1:

What you are trying to do is best accomplished by using an internal CSS stylesheet, rather than using inline styles on your table elements. Following is an example of how you can use a CSS stylesheet to style your table.

First, give the table an id like this:

<tableid="thetable"border="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

Then use CSS on the table:

#thetable {
    border-collapse: collapse;
    border: 1px solid;
}

#thetabletd {
    border: 1px solid;
}

The entire HTML document would look something like this:

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>Table Page</title><style>#thetable {
        border-collapse: collapse;
        border: 1px solid;
    }

    #thetabletd {
        border: 1px solid;
    }
    </style></head><body><tableid="thetable"border="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></body></html>

Here is a tutorial on how to get the CSS into your HTML using a stylesheet. Good luck!

Solution 2:

Use CSS classes.

table.MyClass {
    /* Whatever table styles here */border-collapse: collapse;
    border: 1px solid;
}
table.MyClasstd {
    /* Whatever cell styles within the table here */border: 1px solid;
}
<tableclass="MyClass"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

Solution 3:

Externalise the CSS to a separate stylesheet.

table {
  border-collapse: collapse;
  border: 1px solid;
}
td {
  border: 1px solid red;
}
<table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

Post a Comment for "How To Create Table With Simple Border In Html 5"