CSS and Tables

1. CSS and Tables Adding Style to your pages Lecture 3: CSS and Tables

2. Adding Style body { font-family:Arial; font-size:xx-large; } You can create a css stylesheet and attach it to your web pages. You can drag your new stylesheet onto the page.

3. 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

4. One Cell 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); }

5. Display Grid Data 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); 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

6. 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

7. Add an Image 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); • You can create an image and add that:

8. Table layout Lecture 3: EVents

9. 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

10. With Border Collapse In this case the table has border-collapse The cells in the top row have border-bottom set to none

11. Three Rows 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); ... Lecture 3: EVents

12. Setting Borders 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 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; } Lecture 3: EVents

13. 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

14. Sample of Tables in Tables You can specify rowSpan – this means that a column covers more than one row. Similiarly rowSpan. Lecture 3: EVents

15. Using your own method 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(); Lecture 3: EVents

16. MyTableMethod cont. 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; } Lecture 3: EVents

17. 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