Download presentation
Presentation is loading. Please wait.
1
Tables with XHTML Please use speaker notes for additional information!
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trnasitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Start looking at TABLES This web page is going to introduce tables. First row, first column First row, second column Second row, first column Second row, second column The problem is, this doesn't look much like a table because there aren't any borders around it. Now lets take the same table and put the BORDER attribute in the TABLE designation to make it look more like a table. First row, first column First row, second column Second row, first column Second row, second column Now let's say that we want this aligned in the center of the screen instead of against the left wall. This can be accomplished by using the DIV which is used to make a division in the formatting. Note that you must also close the division or the center alignment will continue past the table. The table tag specifies that we using a table structure to show the data. The tr tag specifies a row in the table The td tag is for table data - it is essentially a cell of data.
4
First row, first column First row, second column Second row, first column Second row, second column You now have a table that is in the center of the screen.
6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Start looking at TABLES using XHTML div { text-align: center; } table { border: solid thin; } td { border: solid thin; } This web page is going to introduce tables. I am setting up borders in the CSS because two of my tables need borders. I can use inline style to set the borders to none for the table where I do not want borders to appear. First row, first column First row, second column Second row, first column Second row, second column The problem is, this doesn't look much like a table because there aren't any borders around it. This style establishes the style for the page. Divisions will be centered and the output of the table tag and the td tag will have a solid thin border. Here I am using inline style to override the style in the header and establish no borders on the table and td tags.
7
Now I am going to use the CSS settings to put borders on the table and on the individual cells (td for table data). First row, first column First row, second column Second row, first column Second row, second column Now let's say that we want this aligned in the center of the screen instead of against the left wall. This can be accomplished by using the DIV which is used to make a division in the formatting. Note that you must also close the division or the center alignment will continue past the table. The center attribute is set in the CSS for div. First row, first column First row, second column Second row, first column Second row, second column You now have a table that is in the center of the screen. div { text-align: center; } The setting of text-align center for the division means that the table within the division will be aligned to the center.
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trnasitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Continue looking at TABLES This web page is going to continue looking at tables. Now lets look at putting captions on the table and on the columns: A caption on the whole table is done with the CAPTION command. Note that the caption can be either at the top or bottom of the table (ALIGN=BOTTOM puts the caption underneath the table). The TH command creates column headers. This is the sample table complete with caption COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column
11
This is the sample table complete with caption ROW #S COLUMN #1 COLUMN #2 First row First row, first column First row, second column Second row Second row, first column Second row, second column Notice that things designated with the TH are in bold to stand out as row and column headers while things designated as TD are not bold - they are the data. You can alter the BORDER on the table and you can use CELLPADDING to leave a little space inside, between the border and the data in the cell. COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column Note that the th tag can be used outside the first row. In this case I want the left most cell to be a header. Cellpadding can be used to leave a little space around the data.
12
COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column Notes on data alignment options If you use an ALIGN (LEFT, RIGHT, CENTER) clause within the TR, the data within that row will be horizontally aligned If you want to use vertical alignment than use the VALIGN clause within the TR You can also use ALIGN with TOP or BOTTOM within the TD This is the sample table complete with caption ROW #S COLUMN #1 COLUMN #2 First row 1,1 1,2 Second row 2,1 2,2 Third row 3,1 3,2
13
Remember that is it very important to test your code in a variety of browsers. Even if code pases the XHTML test, it may not be implement by a particular browser. In this case, Explorer 6 has not implemented the ability to put the caption at the bottom.
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Continue looking at TABLES table { border: solid thin; } td { border: solid thin; } This web page is going to continue looking at tables. Now lets look at putting captions on the table and on the columns: A caption on the whole table is done with the CAPTION command. Note that the caption can be either at the top or bottom of the table (ALIGN=BOTTOM puts the caption underneath the table). The TH command creates column headers. This is the sample table complete with caption COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column table { border: solid thin; caption-side: bottom; } This is a way to put the caption at the bottom that is currently unsupported in Explorer.
15
The caption is shown at the bottom of the table in this viewing through Netscape.
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Continue looking at TABLES table { border: solid thin; caption-side: bottom; } td { border: solid thin; } This web page is going to continue looking at tables. Now lets look at putting captions on the table and on the columns: A caption on the whole table is done with the CAPTION command. Note that the caption can be either at the top or bottom of the table (ALIGN=BOTTOM puts the caption underneath the table). The TH command creates column headers. This is the sample table complete with caption COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column This shows the code that puts the caption at the bottom in some browsers. If it is not supported, the default of caption at the top is executed.
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Continue looking at TABLES table { border: solid thick; padding: 10; } td, th { border: solid thin; } This web page is going to continue looking at tables. You can alter the BORDER on the table and you can use CELLPADDING to leave a little space inside, between the border and the data in the cell. COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column In this example the default for borders is solid and thck with a padding (cellpadding) of 10.
19
COLUMN #1 COLUMN #2 First row, first column First row, second column Second row, first column Second row, second column This is the sample table complete with caption ROW #S COLUMN #1 COLUMN #2 First row 1,1 1,2 Second row 2,1 2,2 Third row 3,1 3,2
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Mrs. Grocer's Schedule Page If I am not in my office, please check the computer labs. MRS. GROCER'S SCHEDULE - OFFICE: K112 HOURS MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY 8:00 To 8:52 NOT ON CAMPUS 9:00 To 9:52 WEB OFFICE HOUR BY APPT Sometimes need to reschedule due to conflicts with on campus committments CIS 17 K-201 CIS 17 K-205
23
10:00 To 10:52 NOT ON CAMPUS CIS47 K-201 CIS47 K-203 11:00 To 11:52 SOMETIMES AVAILABLE OFFICE HOUR OFFICE HOUR BY APPT 12:00 To 12:52 CIS 50 K-232 CIS 50 K-201 CIS 50 K-232 1:00 To 1:52 USUALLY AVAILABLE CIS 44 K-105 CIS44 K-205 MEETINGS OR AVAILABLE 2:00 To 2:52 OFFICE HOUR BY APPT 3:00 To 3:52 MEETINGS OR AVAILABLE 3:30 - 6:40 CIS67 K-201 OFFICE HOUR BY APPT SOMETIMES AVAILABLE
24
4:00 To 4:52 FREQUENTLY AVAILABLE SOMETIMES AVAILABLE 5:00 To 5:52 6:00 To 6:40 NOT AVAILABLE EVENINGS AND WEEKENDS: I am usually available evenings and weekends for Web Consultation. You can make a Web Office Hour Appointment with me on evenings or weekend via email - please use the email address given out in class. Send e-mail to Mrs. Grocer : pgrocer@bristol.mass.edu Back to the Top Return to home page
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Mrs. Grocer's Schedule Page table { border: solid thin; padding: 5; width: 100%; } td { border: solid thin; width: 20%; } th { border: solid thin; } If I am not in my office, please check the computer labs. MRS. GROCER'S SCHEDULE - OFFICE: K112 HOURS MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY
27
table { border: solid thin; border-color: lime; background-color: beige; padding: 5; width: 100%; } td { border: solid thin; width: 20%; } th { border: solid thin; }
Similar presentations
