CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 41

Tab border in HTML/CSS (Beginner)

I am beginner and i am doing self study how to master this programing language html and css.

I have 3 columns in my body and I want a design like a tab border while the paragraph is inside in the box border. The color on the top of the border is blu (where can i put the tab name).

The picture below shows what I want to acchieve: http://i58.tinypic.com/2i9gvt4.jpg

Upvotes: 2

Views: 1493

Answers (3)

Fathah Cr
Fathah Cr

Reputation: 511

<table style="border:1px solid blue;padding:10px;">
<tr>
<td> Column1 </td>
<td> Column2 </td>
<td> Column3 </td>
</tr>
</table>

Just simplify the code.

Upvotes: 1

user5456558
user5456558

Reputation:

You can also give each <tr>-Tag an own class and then set the bg-color there

<style>
.ipsum {

     color: #1062DD;
}

.paragraph {

    background-color: #333333;
    border: 1px solid #FFFFFF;
    color: red;
    // height: 200px;
}
</style>
<table><td>
<tr class="ipsum">ipsum</tr>
<tr class="paragraph">paragraph</tr>
</td></table>

Upvotes: 0

schlenger
schlenger

Reputation: 1567

If you use a <div> container around your text, you can do something like:

<div>
    <!-- the "tab" -->
    <h3 style="color:blue;">ipsum</h3>
    <!-- the paragraph -->
    <p style="border: 1px solid black;">
        paragraph
    </p>
</div>

Edit: Belonging the comment, here the new Solution: http://jsfiddle.net/hqqtm2xf/2/

Remember to place the CSS styles in a seperate file, this is only for demonstration reasons.

For getting started in HTML and CSS i recommend http://www.w3schools.com/css/ and http://www.w3schools.com/html/

Hope it helps. Greetings Mat

Upvotes: 2

Related Questions