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.

2

body{

font-family:Arial;font-size:xx-large;

}

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

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); }

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);

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

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);

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 border-bottom set to none

10

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);...

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

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

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

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();

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; }

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