CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.
Transcript of CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.
![Page 1: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/1.jpg)
CSS and Tables
Adding Style to your pages
Lecture 3: CSS and Tables 1
![Page 2: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/2.jpg)
Adding Style
• You can create a css stylesheet and attach it to your web pages.
• You can drag your new stylesheet onto the page.
2
body{
font-family:Arial;font-size:xx-large;
}
![Page 3: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/3.jpg)
Create a Table
• In C# you can create a table and add it to your form in the On_Load method
• You create a Table.• You create a TableRow• You create a Table Cell• Add the cell to the row• Add the row to the table• Add the table to the controls
3
![Page 4: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/4.jpg)
One Cell
4
protected void Page_Load(object sender, EventArgs e) { Table tb = new Table(); TableRow tr = new TableRow(); TableCell td = new TableCell(); td.Text = "One Cell"; tr.Cells.Add(td); tb.Rows.Add(tr); Controls.Add(tb); }
![Page 5: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/5.jpg)
Display Grid Data
• Data in an array can be shown in a table.
• The data may be in in more than one array
Lecture 3: CSS and Tables 5
String [] phones = {"N900","X6 16GB","E71","6700 Classic" }; int[] prices = {479,299,239,209 }; Table tb = new Table(); for (int i = 0; i < phones.Length; i++) { TableRow tr = new TableRow(); TableCell td = new TableCell(); td.Text = phones[i]; tr.Cells.Add(td); tb.Rows.Add(tr); } Controls.Add(tb);
![Page 6: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/6.jpg)
Adding Images
• You can add pictures
• The gif may be in another directory– You must create an
image.– Set the ImageUrl– Add the image to a
new cell– Add the cell to the
row.Lecture 3: EVents 6
![Page 7: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/7.jpg)
Add an Image
• You can create an image and add that:
7
String[] imgs = {"sm_nok_n97_B.gif", "sm_nok_x6_w.gif", "sm_nok_e72.gif", "sm_nok_6700_s.gif"};...TableCell imc = new TableCell();Image im = new Image();im.ImageUrl = "phones/"+imgs[i];imc.Controls.Add(im);tr.Cells.Add(imc);
![Page 8: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/8.jpg)
Table layout
Lecture 3: EVents 8
![Page 9: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/9.jpg)
Horizontal Layout
• In this example there are only three rows.
• You create three rows before the loop
• Inside the loop you add a cell to each row
Lecture 3: EVents 9
![Page 10: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/10.jpg)
With Border Collapse
• In this case the table has border-collapse
• The cells in the top row have border-bottom set to none
10
![Page 11: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/11.jpg)
Three Rows
Lecture 3: EVents 11
Table tb = new Table(); TableRow tr1 = new TableRow(); TableRow tr2 = new TableRow(); TableRow tr3 = new TableRow(); tb.Rows.Add(tr1); tb.Rows.Add(tr2); tb.Rows.Add(tr3); for (int i = 0; i < phones.Length; i++) { TableCell td = new TableCell(); td.Text = phones[i]; td.CssClass = "name"; tr1.Cells.Add(td); TableCell pr = new TableCell(); pr.CssClass = "price"; pr.Text = "£" + prices[i]; tr2.Cells.Add(pr);...
![Page 12: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/12.jpg)
Setting Borders
Lecture 3: EVents 12
table{border-collapse:collapse;}
td{border:solid thin black
}td.price{
border-top:none;border-bottom:none;
}td.img{
border-top:none;}td.name{
border-bottom:none;}
The default border style is solid.
The name cells have no border on the bottom.
The img cells have no border on the top.
The price cells...
The css stylesheet
![Page 13: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/13.jpg)
Table inside a Table
• You can create a new table and put that inside a table cell.
• To do that you do not set the td.Text you add to td.Controls:
Table innerTable = new Table();
...
td.Controls.Add(innerTable);
Lecture 3: EVents 13
![Page 14: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/14.jpg)
Sample of Tables in Tables
• You can specify rowSpan – this means that a column covers more than one row.
• Similiarly rowSpan.
Lecture 3: EVents 14
![Page 15: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/15.jpg)
Using your own method
Lecture 3: EVents 15
protected void Page_Load(object sender, EventArgs e) { Table nk = MyTableMethod("Nokia 5230",300,"sm_nok_5230.gif"); Controls.Add(nk); Table er = MyTableMethod("Errikson W995", 250, "sm_se_w995.gif"); Controls.Add(er); }
Table MyTableMethod(String name,int price,String image) { Table myTable = new Table(); TableRow trn = new TableRow(); TableCell tcn = new TableCell(); tcn.Text = name; trn.Cells.Add(tcn); TableRow tri = new TableRow(); TableCell tci = new TableCell();
![Page 16: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/16.jpg)
MyTableMethod cont.
Lecture 3: EVents 16
Image i = new Image(); i.ImageUrl = "phones/"+image; tci.Controls.Add(i); tri.Cells.Add(tci); TableRow trp = new TableRow(); TableCell tcp = new TableCell(); tcp.Text = "£" + price; trp.Cells.Add(tcp); myTable.Rows.Add(trn); myTable.Rows.Add(tri); myTable.Rows.Add(trp); return myTable; }
![Page 17: CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables1.](https://reader035.fdocuments.in/reader035/viewer/2022062322/56649ee65503460f94bf5be2/html5/thumbnails/17.jpg)
Summary
• You can arrange tables in many ways
• You can show data in columns or rows
• You can set the cssClass of a table, a row or a cell.
• You can create tables inside tables.
• You can create your own methods to make your programs easier to understand.
Lecture 3: EVents 17