Presentation is loading. Please wait.

Presentation is loading. Please wait.

Using tables in HTML Goes in order with Examples at my site.

Similar presentations


Presentation on theme: "Using tables in HTML Goes in order with Examples at my site."— Presentation transcript:

1 Using tables in HTML Goes in order with Examples at my site.
<table> is the tag to start a table. Then within the table you can set up rows and columns to make sells. <tr> is to establish rows and <td> breaks the rows up into cells. It should be noted that the structure here is the same so basically dividing up the rows makes columns.’ This table does not have any borders to make the cells stand out.

2 In the css style I have said that I want borders around the table and around the <td> cells.
Note above that there is a line around each of the cells and then a line around the whole table. The border is set up to be 1px side and to be solid and black. Look up borders at W3schools or another resource. Be sure to look at the older way of doing it on the third example.

3 Note that this time I did table and td as separate styles because I wanted them to be different. The table has a thicker border 2px and it is solid and blue. Around the cells <td> there is a thinner 1 px that is dotted and red.

4 I zoomed it so you could better see the borders

5 This shows how you can center the table
This shows how you can center the table. I did that with the margin-left and margin-right in css. The text-align center applies to the text that is going inside the cells. Here I used <th> instead of <td> for the top row of the table because I am putting column headers there. Making them a header means they will be bold and centered.

6 From W3 schools

7 Just an alternate way to do borders so you address each attribute separately.

8

9 Too big to fit – go and look it up at my site.
Note padding Note data alignment in cells.

10 Again incomplete, look at the original and let me know if you have questions

11 Please be sure to look at how the tbody etc works
Please be sure to look at how the tbody etc works. The code really needs to be checked out as a whole.

12 There are 6 columns and My schedule should be over all 6 so I used colspan = “6”
The day on Wednesday I am not on campus so I want to span 4 rows with that message so I use rowspan = “4”. The same thing happens on Friday. When I get to 11 I see that Monday, Tuesday and Thursday all have a rowspan of 2 and the only one that does not use a span is 11 and when I get to 12:30 that is the only one that needs an entry as well. Look at the last one on your own – too big!

13


Download ppt "Using tables in HTML Goes in order with Examples at my site."

Similar presentations


Ads by Google