CSS and Tables Adding Style to your pages

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

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

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. Row • You create a Table Cell • Add the cell to the row • Add the row to the table • Add the table to the controls 3

One Cell protected void Page_Load(object sender, Event. Args e) { Table tb = new Table(); Table. Row tr = new Table. Row(); Table. Cell td = new Table. Cell(); td. Text = "One Cell"; tr. Cells. Add(td); tb. Rows. Add(tr); Controls. Add(tb); } 4

Display Grid Data • Data in an array can be shown in a table. • The data may be in in more than one array String [] phones = {"N 900", "X 6 16 GB", "E 71", "6700 Classic" }; int[] prices = {479, 299, 239, 209 }; Table tb = new Table(); for (int i = 0; i < phones. Length; i++) { Table. Row tr = new Table. Row(); Table. Cell td = new Table. Cell(); td. Text = phones[i]; tr. Cells. Add(td); tb. Rows. Add(tr); } Controls. Add(tb); Lecture 3: CSS and Tables 5

Adding Images • You can add pictures • The gif may be in another directory – You must create an image. – Set the Image. Url – Add the image to a new cell – Add the cell to the row. Lecture 3: EVents 6

Add an Image • You can create an image and add that: String[] imgs = {"sm_nok_n 97_B. gif", "sm_nok_x 6_w. gif", "sm_nok_e 72. gif", "sm_nok_6700_s. gif"}; . . . Table. Cell imc = new Table. Cell(); Image im = new Image(); im. Image. Url = "phones/"+imgs[i]; imc. Controls. Add(im); tr. Cells. Add(imc); 7

Table layout Lecture 3: EVents 8

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

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

Three Rows Table tb = new Table(); Table. Row tr 1 = new Table. Row(); Table. Row tr 2 = new Table. Row(); Table. Row tr 3 = new Table. Row(); tb. Rows. Add(tr 1); tb. Rows. Add(tr 2); tb. Rows. Add(tr 3); for (int i = 0; i < phones. Length; i++) { Table. Cell td = new Table. Cell(); td. Text = phones[i]; td. Css. Class = "name"; tr 1. Cells. Add(td); Table. Cell pr = new Table. Cell(); pr. Css. Class = "price"; pr. Text = "£" + prices[i]; tr 2. Cells. Add(pr); . . . Lecture 3: EVents 11

Setting Borders The css stylesheet table{ td{ } td. price{ } td. img{ } td. name { } border-collapse: collapse; } border: solid thin black border-top: none; border-bottom: none; border-top: 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. . . border-bottom: none; Lecture 3: EVents 12

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 inner. Table = new Table(); . . . td. Controls. Add(inner. Table); Lecture 3: EVents 13

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

Using your own method protected void Page_Load(object sender, Event. Args e) { Table nk = My. Table. Method("Nokia 5230", 300, "sm_nok_5230. gif"); Controls. Add(nk); Table er = My. Table. Method("Errikson W 995", 250, "sm_se_w 995. gif"); Controls. Add(er); } Table My. Table. Method(String name, int price, String image) { Table my. Table = new Table(); Table. Row trn = new Table. Row(); Table. Cell tcn = new Table. Cell(); tcn. Text = name; trn. Cells. Add(tcn); Table. Row tri = new Table. Row(); Table. Cell tci = new Table. Cell(); Lecture 3: EVents 15

My. Table. Method cont. } Image i = new Image(); i. Image. Url = "phones/"+image; tci. Controls. Add(i); tri. Cells. Add(tci); Table. Row trp = new Table. Row(); Table. Cell tcp = new Table. Cell(); tcp. Text = "£" + price; trp. Cells. Add(tcp); my. Table. Rows. Add(trn); my. Table. Rows. Add(tri); my. Table. Rows. Add(trp); return my. Table; Lecture 3: EVents 16

Summary • You can arrange tables in many ways • You can show data in columns or rows • You can set the css. Class 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