Web Designing 101 Class


#161


#162

Excellent work!

Now, let us look at it in detail.

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property, in our mycss.css, we have set the border here:

td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }


#163

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property, in mycss.css, we have done it like this:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#164

HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property, in mycss.css, we have done it this way:

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#165

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

td, th {
    border: 1px solid #dddddd;
    **text-align: left;**
    padding: 8px;
}

#166

Please what does this mean?

tr:nth-child(even) {
background-color: #dddddd;


#167

@Angie, do this:

In mycss.css, set your table header to align to the right.

Remember:

<tr> - is use to create a cell in your table
<th> - is the header of each column
<td> - is the data your putting in your cell.

#168

I’ll explain this when we get to CSS full time. For now, ignore.


#169


Please what is padding?


#170

Change this line in the td,th line of your mycss.css to 0px :slight_smile:

padding: 8px;

Padding is basically the space between the line above your td and below it? It’s like a compressor. Change it to 0 on your css and refresh the web page to understand what I mean.


#171

I do. Gracias :blush:


#172

Now let us discuss Lists. Lists are very important because its more or less how this is created in a web page

But before then, I want to examine a tag called <div> .

A div is basically a section on your webpage. In a more realistic scenario, the body in your webpage should be enclosed in a div tag. So it should look something like this :slight_smile:

<div>
<body>

<div>
<p>   A paragraph in my body </p>
</div>

</body>
</div> 

So the idea is that you enclose every section of your webpage in a div.


#173

Now, adjust your web page thus

Enclose your

in a div

Do the same for your paragraphs.

Paste the result when your done.


#174

My div tag did not reflect in my web page…


#175

Its not supposed to reflect. we are just dividing our page into divs


#177

Now let us discuss how lists work first.

There are 2 types on lists:

  1. Unordered List

An unordered list starts with the<ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

#178
  1. Ordered List

An ordered list starts with the

    tag. Each list item starts with the
  1. tag.

    The list items will be marked with numbers by default:

     <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

#179

Okay. Maybe I was expecting to see a demarcating line or box of some sort.


#180

Now @Angie, add 1 unordered list to your html page and 1 ordered list as well.


#181

Also note that we can use the combination of <ul> , <li> and <a> tags to create an horizontal navigation bar. In fact it’s what most people use.