HTML---图像标记和表格标记

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML---图像标记和表格标记相关的知识，希望对你有一定的参考价值。

参考技术A 基本语法格式：<img src="图像 URL（路径）" />

src属性用于引入图片，指定图像文件的路径，包括绝对路径或相对路径（同级目录（同一文件夹）、上级目录、下级目录）

width和height属性分别用来设置图像的宽度和高度，单位为像素。

border属性用来设置图像的边框，单位是像素，0表示无边框。

基本语法格式：<table>

                                <tr>

                                       <td>单元格内的文字<td>

                                 </tr>

                         </table>

<table></table>用于定义一个表格，<tr></tr>用于定义表格中的行，<td></td>用于定义表格中的单元格（列）。

<th></th>也表示单元格，自动居中，加粗显示

常用的属性：

（1）<table>标记的border属性会为每个单元格应用边框，并用边框围绕表格。

如图，如果border值发生改变，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是1像素宽（若改为0，则边框全无）。

（2）width、height：宽度、高度

（3）align：描述表格的位置（文字位置）

（4）cellspacing：描述边框的厚度

（5）cellpadding：描述表格内文字与边框的距离

（6）background：设置表格背景颜色

（6）bgcolor：设置单元格背景颜色

（7）rowspan：设置单元格竖跨的行数（合并）

（8）colspan：设置单元格横跨的列数（合并）

格式：<!-- -->

注释内容不会显示在网页中

如何在收藏视图中显示复选标记（图像）

【中文标题】如何在收藏视图中显示复选标记（图像）【英文标题】：How to show check tick mark in Collection view (images) 【发布时间】：2016-03-23 13:04:52 【问题描述】：

在表格视图中，我们可以轻松地在单元格上添加复选标记。

但是在集合视图中，当我们选择一个单元格（图像）时，我们如何放置复选标记？

我刚刚在单元格和图像视图中拍摄了一个图像视图，并放置了一个刻度线图像。我的代码如下。

但它不起作用。 

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)


   //  handle tap events
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! customCollectionViewCell


    if(cell.checkMarkImage.hidden == true)
    
        print("Hidden")
       cell.checkMarkImage.hidden = false

    
    else
    
         cell.checkMarkImage.hidden = true
        print("No Hidden")

【问题讨论】：

***.com/questions/18977527/… 简短回答你不能，你要么创建你的自定义单元格，要么尝试在互联网上的某个地方找到第三方单元格 好的，谢谢@sken3r.MI 谢谢@Ujjwal 这个链接会给我提示。 自定义单元格 + 委托（可选，仅当您希望在刻度更改其状态时立即获取更新）； 【参考方案1】：

//委托方法 cellForItemAtIndexPath

func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) ->
UICollectionViewCell

    //Get a reference to our storyboard cell
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
                                                            "pickSomecell",
                   forIndexPath: indexPath) as! pickSomeGridViewController

    //Show Images in grid view
    cell.cellImage.image = self.arrAllOriginalImages[indexPath.row]
                                                            as? UIImage        

    //Check Mark toggle.
    cell.toggleSelected()      

    //return cell.
    return cell

并且在 pickSomeGridViewController 中显示选中与否的选中标记图像。 

class pickSomeGridViewController: UICollectionViewCell
//Outlet of cell image.
@IBOutlet var cellImage: UIImageView!

//Outlet of checkMark image.
@IBOutlet var cellCheckMarkImage: UIImageView!

//Function  for select and deselect checkmark.
  func toggleSelected ()
  
    //If image is selected.
    if (selected)
    
            //Show check mark image.
            self.cellCheckMarkImage.hidden = false           
       

    else
    
             //Hide check mark image.
            self.cellCheckMarkImage.hidden = true

【讨论】：

【参考方案2】：

我发现这段代码有两个主要问题：

    您使用dequeueReusableCellWithReuseIdentifier 方法从集合视图缓存中获取不同 单元格，而不是屏幕上的那个。 请改用集合视图的cellForItemAtIndexPath 方法。 您尝试将单元格的状态（选中/未选中）保存在单元格本身中。使用UITableView/UICollectionView 时，这是一个常见的错误，这种方法不起作用。相反，将状态保存在其他位置（例如，在字典中）并在每次集合视图调用您的数据源 cellForItemAtIndexPath 方法时恢复它。

【讨论】：

是的，我会尝试。所以我必须使用 cellForItemAtIndexPath 方法？谢谢【参考方案3】：

var arrData = NSMutableArray() // 1.用这样的模态类对象创建一个 ModalClass.swift 和 NSArray

 class CustomModal: NSObject 
        //Declare bool variable for select  and deselect login
        var is_selected = Bool()
        //you can declare other variable also
        var id = Int32()






// 2. custom array with modal objects

    override func viewDidLoad() 
        super.viewDidLoad()
        let arrTemp = NSArray()
        arrTemp = [1,2,3,4,5,6,7,8,9,10]
        for i in 0 ..< arrTemp.count
            let eventModal = CustomModal()
            eventModal.is_selected = false
            eventModal.id = arrTemp[i] 
            arrData.add(eventModal)
        
        tblView.reloadData()

// 2. 使用集合视图委托方法

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 
    let modal = arrData[indexPath.row] as! CustomModal()
    modal.is_selected = true
    self.arrData.replaceObject(at: indexPath.row, with: modal)

    tblView.reloadData()


func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) 
    let modal = arrData[indexPath.row] as! CustomModal()
    modal.is_selected = false
    self.arrData.replaceObject(at: indexPath.row, with: modal)

    tblView.reloadData()


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! YourCellClass
    let modal = arrData[indexPath.row] as! CustomModal
    if modal.is_selected == true
        cell.imgView.image = UIImage(named:"selected_image")
    else
        cell.imgView.image = UIImage(named:"deselected_image")

【讨论】：

【参考方案4】：

@Kishor，paintcode 是第三方工具，您可以通过它执行此操作。我也提供了链接。由于默认情况下您没有此功能，因此您应该通过自定义行为来实现这一点。谢谢。

【讨论】：

但是我们怎样才能把它放在网格视图中呢？我们只创建复选标记对吗？谢谢【参考方案5】：

斯威夫特 4

在视图控制器中

// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCollectionViewCellID", for: indexPath as IndexPath) as! YourCollectionViewCell
    cell.someImageView.image = imgArr[indexPath.item]
    return cell


func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 

    print("You selected cell #\(indexPath.item)!")
    let cell = collectionView.cellForItem(at: indexPath) as? YourCollectionViewCell
    cell?.isSelected = true
    cell?.toggleSelected()    


func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) 

    let cell = collectionView.cellForItem(at: indexPath) as? YourCollectionViewCell
    cell?.isSelected = false
    cell?.toggleSelected()

在你的CollectionViewCell中

class YourCollectionViewCell: UICollectionViewCell 


    @IBOutlet weak var someImageView: UIImageView!
    @IBOutlet weak var checkImageView: UIImageView!

    //Function  for select and deselect checkmark.
    public func toggleSelected() 

        if (isSelected == false) 

            //Hide check mark image.
            self.checkImageView.image = UIImage(named: "unCheckImage")
            isSelected = true
        else

            //Show check mark image.
            self.checkImageView.image = UIImage(named: "CheckImage")
            isSelected = false

希望享受！！

【讨论】：

【参考方案6】： 
var selectedCellIndex:Int?

如果您想在 reloadData() 之后显示选定的项目，请使用变量：这是以前选择的 CellItem。 受上述答案启发

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ColorCollectionCell", for: indexPath) as! ColorCollectionCell

        cell.isSelected = false

        if selectedCellIndex == indexPath.item 
            cell.checkMarkImgView.image = UIImage(named: "icn_checkMark")
        else 
            cell.toggleSelected()
        

        return cell
    


    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 

        let cell = collectionView.cellForItem(at: indexPath) as! ColorCollectionCell
        cell.isSelected = true
        selectedCellIndex = indexPath.item
        cell.toggleSelected()

在 CollectionViewCell 中你可以使用这个方法

class ColorCollectionCell: UICollectionViewCell 
    @IBOutlet weak var cellimgView: UIImageView!
    @IBOutlet weak var checkMarkImgView: UIImageView!

     func toggleSelected() 

        if (isSelected) 
            self.checkMarkImgView.image = UIImage(named: "icn_checkMark")
        else
            self.checkMarkImgView.image = UIImage(named: "")
// here you can use uncheck img here i am not using any image for not selected.

【讨论】：

以上是关于HTML---图像标记和表格标记的主要内容，如果未能解决你的问题，请参考以下文章

html语言中表格标记能嵌套吗？

Swift - 处理表格视图多个部分的自定义复选标记按钮状态

html表格标签与属性

检测扫描文档中裁切标记的位置

HTML 标准表格标记

如何使用打字稿在表格的单元格中动态插入锚标记？