Creating Custom TableView Cells in iOS

This entry is part 15 of 33 in the series iOS Apps

Creating Custom TableView Cells in iOS (Swift 2 : Xcode 7)
https://youtu.be/EVJiprvRLoo

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet var tableView: UITableView!
    
    var names = ["Mark", "Clyde", "Buck", "Steve", "Wallace"]
    var breeds = ["Labrador", "Bulldog", "German Sherpherd", "Golden Retriever", "Yorkshire"]
    var images = [UIImage(named: "Mark"), UIImage(named: "Clyde"), UIImage(named: "Buck"),UIImage(named: "Steve"), UIImage(named: "Wallace")]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return names.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        let cell = self.tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CustomCell
        
        cell.photo.image = images[indexPath.row]
        cell.name.text = names[indexPath.row]
        cell.breedName.text = breeds[indexPath.row]
        
        return cell
    }
}

CustomCell.swift

import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet var photo: UIImageView!
    @IBOutlet var name: UILabel!
    @IBOutlet var breedName: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

HTML Table: Alignment and cell height

This entry is part 16 of 16 in the series HTML Table

Similar to Excel, we can align the text in the cell to the left, center or to the right.

The cell height could be set as well.
Output

Here in this example, we set the text to align vertically and in the center of the cell.

The height of the cell has been increased as well.

HTML Code
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            border-spacing: 5px;
        }

        td {
            border-style: solid;
            border-width: 1px;
            text-align: center;
            vertical-align: top;
            height: 50px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

 

HTML Table: Spanning or merging table cells

This entry is part 8 of 16 in the series HTML Table

In HTML, as in using Excel spreadsheet, you can span or merge two or more adjacent cells so that one cell spans multiple rows and/or columns.

This technique is useful for centering text across several columns.

To merge a cell into adjacent cells to its right, use the colspan attribute and specify the number of columns to be spanned.

<td colspan='2'>

To merge a cell into adjacent cells below it, use the rowspan attribute and specify the number of rows to be spanned.

<td rowspan='2'>

Here a simple example on using the colspan.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='80%'>
    <tr>
        <th>ID</th>
        <th colspan='2'>Artiste</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>David Bowie</td>
    </tr>
</table>

</body>
</html>


Merging Table Cells

HTML Table: Row with a different cell number

This entry is part 3 of 16 in the series HTML Table

In the previous example, the table have the same number of cells in the rows.

If we have a row with a cell less than the others, we would have a table illustrated by the example below.

In the tr tag in line 15, it has one <td> tag less than the <tr> in line 10.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
    </tr>
</table>

</body>
</html>
Codecrawl.com-HTML Table